reactjs - 将事件方法传递给孙组件

Question

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

我有一个基本组件(Page)，它使用状态来控制是否显示模式弹出窗口:

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 中，父级将 props/state 传递给子级的唯一方法是向下传递。 React是从上到下单向的；仅从 parent 到 child 。

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

如果您不喜欢在树上传递 props 的复杂性，请考虑使用 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，然后在应用程序变得更加复杂时使用状态容器。