Question

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

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

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

谢谢！

-Eric

Answer 1

你正确地做到了。

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

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

如果您不喜欢使用Redux（我自己使用Redux）向下传递道具的复杂性。

考虑以下资源：

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

Answer 2

为了实现这一点，您需要将 showModal 方法作为道具传递给您想要触发模态可见性的子组件。这是父组件的render方法应该是：

render() {
    return(
        <ChildComponent showModal={this.showModal}>
    )
}

然后在您的子组件中：

class ChildComponent extends Component {

    render() {
        return(
            <input type="button" onClick={this.props.showModal} value="show modal"/>
        )
    }
}

将事件方法传递给孙组件

2 个答案: