別のコンポーネントのアクションを介してクラス名をコンポーネントに切り替えるにはどうすればよいですか？

Question

私は、私は、これは愚かな質問、

であれば、私はボタンが押されたときのdivにCSSスタイルのクラス名を切り替えるしようとしている謝罪、ボタンがあるで一日について反応するのは非常に新しいです

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

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

が、私は、それはページの最初のロード時に実行されていなかった実現：別のページ内のコンポーネントと私はこのような何かを持っていた私はjqueryのを使用して2つをもともと接続できるかどうかはわかりません。すべての助けが非常に高く評価されるだろう！

私はのための「アクティブ」クラス名を切り替えるには、ボタンを取得しようとしている明確にするために、

<header className="contain active"> 

    <Navigation/> 

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

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

を私はボタンコンポーネントを取り出していると私は今、このような何かを持っていますヘッダー

Answer 1

ヘッダーが状態でアクティブかどうかの知識を保持する必要があります。それはこのようなものに見えるでしょう。

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> 
     </> 
    ) 

    } 
} 

ボタンには、アクティブ状態を切り替えるonClickコールバックが渡されます。コンポーネントは状態変更の結果としてレンダリングされ、アクティブなクラス名は状態値に基づいて条件付きでレンダリングされます。