別のコンポーネントから状態を切り替えよう

Question

私はReactとReduxの新機能を使っているので、間違ったやり方をしているかもしれません。違う。

divにクラスを追加する 'レイアウト'コンポーネントにボタンがあります。このクラスは状態から来ています。ボタンはトグルであり、状態&をオンまたはオフにします（これにより、メニューが表示され、残りのページが暗くなります）。

しかし、私はまた、「&」クラスをトグルするために（つまり、リンクをクリックするとメニューが折りたたまれます）、 'Nav'コンポーネント（「レイアウト」内にある「ヘッダ」コンポーネント内に存在します） 。 jQuery/VanillaJSでは、これは非常に簡単でしたが、私はこれを行うReact/Reduxの方法を理解できません。

レイアウトコンポーネント：https://pastebin.com/WzpbeSw7

ヘッダーコンポーネント：https://pastebin.com/c34NFtUx（おそらく関連するが、ここでの参照用ではない）

ナビゲーションコンポーネント：https://pastebin.com/EsJDuLQc

Answer 1

Reduxのを使用することにより：

あなたは状態を持つことができますtoggleBlaBla： "show"のように。 react-reduxを使用してreactxの状態に反応コンポーネントを接続した場合、toggleBlaBlaを「非表示」に変更するアクションを送出するたびに、接続されたコンポーネントが再レンダリングされます。のみ使用することにより

が反応：

次の2つのコンポーネントは、いくつかのイベントでいくつかのUIの状態を変更したい場合は、コンテナコンポーネントでそれらを置くことをお勧めし、あなたの状態は、これら2つのコンポーネントを変更するたびになるように再レンダリング変更された状態が両方のコンポーネントに渡されます。

レイアウト・コンポーネントでは：これを達成するために

Answer 2

一つの方法は、次の操作を実行することである

• に26行の変更<Header/>オン：ヘッダーコンポーネントで<Header handleNavClick={this.toggleNav.bind(this)}/>

：

• オンラインで変更する<Navigation position="header" />：ナビゲーションコンポーネントで<Navigation closeNav={this.props.handleNavClick.bind(this)} position="header" />

：行16変更return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li>で

• へ：return <li key={item._id}><Link to={item.slug} onClick={this.props.closeNav.bind(this)}>{item.name}</Link></li>

このように小道具を渡すと、あなたの中toggleNav関数を参照参照することができますそれから、それに応じて状態を更新します。

***バインドエラーが発生することがあります（React component methods may only be bound to the component instance.など）。

• この場合、this.props.closeNavを直接使用する代わりにナビゲーションコンポーネントで関数を定義する必要があります。ナビゲーションには、closeNav() { this.props.closeNav.bind(this) }のような関数を作成する必要があります。 this.closeNav.bind(this)