改变“叔叔”组件的状态？

Question

在我的一条路线上，我有一个项目列表，您可以单击该列表以在“详细信息”视图中获取更多详细信息。列表和详细视图同时显示。

层次结构：

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

我在 D..Z 上有一个点击事件，它应该改变组件 C 中的状态，以显示点击列表项的数据

从概念上讲，鉴于 React 强调单向数据流，这应该如何实现？

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>
        );
    },
});