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

改变'叔叔'组件中的状态？

1 个答案: