Изменение состояния в компоненте 'дядя'?

Question

На одном из моих маршрутов у меня есть список предметов, которые вы можете щелкнуть, чтобы получить более подробную информацию в виде «детали». Оба списка и подробный вид отображаются одновременно.

иерархия:

    A (page wrapper component) 
       / \ 
    (list view) B  C (detail view) 
      /| \ 
(list items) D.....Z 

У меня есть событие щелчка на D..Z, которые должны изменять состояние в компоненте C, чтобы показать данные щелкнули элемента списка

Концептуально, как следует это должно быть выполнено, если учесть акцент Реакта на однонаправленный поток данных?

Answer 1

Вы всегда должны пытаться поставить состояние как можно выше по дереву компонентов.

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

Вот пример реализации для компонента обертку страницы:

var PageWrapper = React.createClass({ 
    getInitialState() { 
     return { 
      selectedItem: null, 
     }; 
    }, 

    _handleItemClick(selectedItem) { 
     this.setState({ selectedItem }); 
    }, 

    render() { 
     return (
      <div> 
       <ListView items={[...]} onItemClick={this._handleItemClick} /> 
       <DetailView item={this.state.selectedItem} /> 
      </div> 
     ); 
    }, 
});