web-dev-qa-db-ja.com

React.jsでprop状態の変化をリッスンする方法は？

Backbone.ViewをReactに移植しています。何かが足りないかもしれませんが、コンポーネントの状態を兄弟の状態に依存させる慣用的な方法を理解することはできません。たとえば、次のようなコンポーネントがあるとします。

_<Timeline>
  <Page selected="true" onClick={this.handleClick} />
  <Page selected="false" onClick={this.handleClick}/>
</Timeline>
_

そして、すべてのhandleClickがsetState({selected: true})に対してそれを行うとしましょう。私の質問は、このコンポーネントの兄弟の状態がtrueに設定される前にfalseに設定されていることを確認するにはどうすればよいですか。

私の理想的な解決策は、prop状態の変化をリッスンし、タイムラインコンポーネントからサブコンポーネントをforceRenderすることですが、これが受け入れられているアプローチかどうかはわかりません。

コンポーネントを分解するための推奨される方法 は、他の場所で再利用できるように、可能な限りステートレスに保つことであると理解しているため、このコンポーネントを実装する別の方法も探しています。

reactjs
12
picardo

兄弟が相互依存状態にあるように見える場合は、関連する状態を親コンポーネントまで引き上げることができます。

この場合、親の状態オブジェクトにselectedPageを格納して、renderメソッドを次のようにする必要があります。

<Timeline>
  <Page selected={this.state.selectedPage === 1} onClick={this.handleClick} />
  <Page selected={this.state.selectedPage === 2} onClick={this.handleClick} />
</Timeline>

または類似。選択したページを変更する場合は、親に保存されているselectedPage値を変更するだけです。おそらく、子に渡されるコールバック内から変更します。

このパターンに従うことで、2つのページが常に互いに同期していることを確認できます。親が再レンダリングするたびに、2つの子で小道具が同時に更新されます。

20
Sophie Alpert