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子组件的变化，但我不知道这是否是一种可接受的方法。

我也在寻找实现此组件的替代方法，因为我理解recommended way to decompose the components是为了确保它们尽可能无状态，以确保它们可以在其他地方重用。

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值，可能是从传递给子项的回调中更改。

通过遵循这种模式，您可以确保两个页面始终彼此同步 - 每次父母重新渲染时，道具将同时更新两个孩子。

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

1 个答案: