如何在React.js中监听prop状态的变化？

Question

我正在将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中时间轴组件中子组件的变化,但我不知道这是否是一种可接受的方法.

我也在寻找实现此组件的替代方法,因为我理解分解组件的推荐方法是尽可能保持它们无状态,以确保它们可以在其他地方重用.

Answer 1

如果兄弟姐妹似乎具有相互依赖的状态,那么您需要将相关的状态部分提升到父组件.

在这种情况下,您可能希望存储selectedPage在父级的状态对象上,从而使render方法看起来像

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

或类似的.如果要更改所选页面,只需更改selectedPage父项中存储的值,可以从传递给子项的回调中更改.

通过遵循此模式,您可以确保两个页面始终彼此同步 - 每次父项重新呈现时,两个子项上的道具将同时更新.