Как слушать изменения в состоянии prop в React.js?

Я переношу по Backbone.View в React. Я мог бы что-то упустить, но я не могу понять идиоматический способ сделать состояние компонента зависимым от состояний своего брата. Например, скажем, что у меня есть такой компонент:

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

И пусть говорят, что все handleClick делает это с setState({selected: true}). Мой вопрос в том, как я должен убедиться, что состояние братьев и сестер этого компонента установлено в false до того, как установлено значение true.

Моим идеальным решением было бы прослушивать изменения в состоянии prop и forceRender подкомпоненты из компонента Timeline, но я не знаю, является ли это приемлемым подходом.

Я также ищу альтернативные способы реализации этого компонента, так как я понимаю, что рекомендуемый способ разложения компонентов заключается в том, чтобы сохранить их как можно более безграждан, чтобы обеспечить их могут быть повторно использованы в другом месте.

Ответ 1

В тех случаях, когда братья и сестры, похоже, имеют взаимозависимое состояние, вам нужно поднять соответствующие части состояния до родительского компонента.

В этом случае вы, вероятно, захотите сохранить selectedPage в родительском состоянии, что приведет к тому, что метод визуализации будет выглядеть как

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

или аналогичный. Если вы хотите изменить выбранную страницу, просто измените значение selectedPage, хранящееся на родительском объекте, возможно, из обратного вызова, переданного дочерним элементам.

Следуя этому шаблону, вы можете убедиться, что две страницы всегда синхронизированы друг с другом - каждый раз, когда родительский рерикс реквизит будет обновляться одновременно для двух детей.