12

我正在将 Backbone.View 移植到 React 中。我可能遗漏了一些东西，但我无法找出使组件状态依赖于其兄弟状态的惯用方法。例如，假设我有一个这样的组件：

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

假设所有的 handleClick 都是为了setState({selected: true}). 我的问题是如何确保该组件的兄弟姐妹的状态在设置为 true 之前设置为 false。

我理想的解决方案是监听道具状态的变化并从 Timeline 组件中强制渲染子组件，但我不知道这是否是一种可接受的方法。

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

4

1 回答 1

20

在兄弟姐妹似乎具有相互依赖的状态的情况下，您需要将相关的状态提升到父组件。

在这种情况下，您可能希望存储selectedPage在父级的状态对象上，导致渲染方法看起来像

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

或类似的。当您想要更改所选页面时，只需更改selectedPage存储在父级上的值，可能来自传递给子级的回调。

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

于 2013-11-28T03:46:06.410 回答