Wie kann ich einen Klassennamen über eine Aktion in einer anderen Komponente in eine Komponente umwandeln?

Question

Ich bin sehr neu an einem Tag reagieren Ich entschuldige mich, wenn dies eine dumme Frage ist,

in so

Ich versuche, einen Klassennamen für CSS-Styling zu einem div zu wechseln, wenn eine Taste gedrückt wird, ist die Taste eine separate Komponente in der Seite und ich bin nicht sicher, wie ich die beide ursprünglich mit mit jquery verbinden kann ich so etwas wie dies hatte:

componentWillMount() { 
    $(document).ready(function() { 
     var header = $('header'), 
      btn = $('button.toggle-nav'); 

     btn.on('click', function() { 
      header.toggleClass('active'); 
     }); 
    }); 
} 

Aber ich merkte, dass es nicht auf der ersten Last der Seite ausgeführt werden . Jede Hilfe würde sehr geschätzt werden!

Ich habe auf die Schaltfläche Komponente herausgenommen, und ich habe so etwas wie dies jetzt,

<header className="contain active"> 

    <Navigation/> 

    <button className="toggle-nav"> 
     <span className="fa fa-bookmark-o" aria-hidden="true"></span> 
    </button> 

    <div className="divider"></div> 

ich die Taste, um zu klären, ich versucht, die „aktive“ Klassenname für die hin- und herzuschalten header

Answer 1

Sie möchten wissen, ob die Kopfzeile aktiv oder nicht im Status ist. Es würde ungefähr so ​​aussehen.

class Test extends React.Component { 
    constructor(...args) { 
    super(...args) 
    this.state = { active: false } 
    this.onButtonClick = this.onButtonClick.bind(this) 
    } 

    onButtonClick() { 
    this.setState((state) => ({ active: !state.active })) 
    } 

    render() { 
    return (
     <> 
     <header className={`contain ${this.state.active ? 'active' : ''}`> 
     <Navigation/> 
     <button className="toggle-nav" onClick={this.onButtonClick}> 
      <span className="fa fa-bookmark-o" aria-hidden="true"></span> 
     </button> 
     <div className="divider"></div> 
     </> 
    ) 

    } 
} 

Die Schaltfläche wird ein OnClick-Rückruf übergeben, der den aktiven Zustand wechselt. Die Komponente wird als Ergebnis der Statusänderung erneut gerendert und der Name der aktiven Klasse wird basierend auf dem Statuswert bedingt wiedergegeben.