将事件方法传递给孙组件

Question

我对React还是有点陌生​​，所以如果这是一个newb问题，请原谅我。

我有一个基本组件（页面），它使用状态来控制是否显示模式弹出窗口：

constructor(props) {
    super(props);

    this.state = {
        showModal : false,
        modalContent : 'Initial Modal Content'
    };

    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
}

showModal(modalContent) {
    this.setState({
        showModal : true,
        modalContent : modalContent
    });
}

hideModal(e) {
    this.setState({showModal : false});
}

我的问题是我希望孙子组件能够打开我的模态。

我知道我可以通过将状态传递给子组件然后再传递给孙组件来做到这一点： <PartnersTable showModal={this.showModal} partners={PARTNERS} />

对我来说，这似乎有些草率，但这也许只是React的方式。

有人可以让我知道我是否正确执行此操作，或者是否有更清洁的方法来执行此操作？

您可以在GitHub上查看我的完整应用程序：https : //github.com/CCChapel/Thy-Kingdom-Come/blob/master/react.js

谢谢！

-埃里克

Answer 1

您做对了。

在React中，父母将道具/状态传递给孩子的唯一方法是将其向下传递。React从上到下是单向的；从父母到孩子。

所以你的假设是正确的。它可能变得很草率。您必须知道React是用于呈现UI和状态管理的简单案例。当您的应用程序变得更加复杂并且您需要以直接和简化的方式传递状态时，可以使用Redux，MobX或其他状态容器。

如果您不喜欢将道具向下传递到树上的复杂性，可以考虑使用Redux（我自己使用Redux）。

请考虑以下资源：

• https://egghead.io/courses/getting-started-with-redux
• http://redux.js.org/docs/introduction/
• https://github.com/reactjs/redux/tree/master/examples

要了解React是如何工作的，尽管习惯了首先只使用React，然后在应用程序变得更复杂时使用状态容器。