Reactjs 将事件方法传递给孙子组件

我对反应有点生疏，所以如果这是一个有点生疏的问题，请原谅我

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

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

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

我知道我可以通过将状态传递给子组件，然后传递给孙子组件来实现这一点：

这对我来说似乎有点草率，但也许这就是我的反应方式

有没有人能让我知道我是否做得很好，或者有没有更干净的方法

您可以在GitHub上查看我的完整应用程序：

谢谢

---

-Eric

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

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

render（）{
返回(
)
}

然后在子组件中：

class ChildComponent extends Component {

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

class-ChildComponent扩展组件{
render（）{
返回(
)
}
}

你做得对

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

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

如果您不喜欢使用Redux（我自己也使用Redux）将道具传递到树上的复杂性

考虑以下资源：

---

要了解React的工作原理，请先习惯于仅使用React，然后在应用程序变得更复杂时使用状态容器。

传递一个改变

showmodel

的函数可能是最具反应性的方法。您可能需要研究从组件中提取状态，例如，或者如果它变得混乱。Redux/Flux是您想要的。您是否100%确定继承是解决此问题的最佳解决方案？作文通常比遗传好谢谢，基思！至少我知道我做对了。我用这个一页的微型站点来测试React并扩展我的知识，所以我会接受你的建议，暂时不要进入Redux。老实说，这是应用程序中最复杂的部分。再次感谢@埃里克罗夫塔，不客气。如果这个答案足够的话，如果你能接受，我将不胜感激。