React中如何从其他组件触发方法关闭已打开的Modal弹窗

React 中直接嵌套的父子组件通信，直接通过 props 传递回调函数即可实现子组件调用父组件方法，不需要额外引入复杂依赖。

第一步：修改父组件 Event.js #

在渲染子组件 EditEventForm 时，将你已经写好的 handleClose 方法作为 prop 传递给子组件，建议同时给 Modal 组件绑定关闭事件，适配点击蒙层、按ESC关闭的通用交互。
修改后对应代码片段：

<Modal
  open={open}
  onClose={handleClose} // 绑定Modal自带的关闭回调
>
  <EditEventForm 
    event={event} 
    setUpdateEvent={setUpdateEvent} 
    onClose={handleClose} // 把关闭方法传给子组件
  />
</Modal>

第二步：修改子组件 EditEventForm.js #

组件入参接收父组件传入的 onClose 回调，直接绑定给关闭按钮的 onClick 事件即可。
修改后完整代码：

const EditEventForm = ({ onClose }) => {
    return (
        <Paper className={classes.paper} elevation={6}>
            <form
                autoComplete="off"
                noValidate
                className={`${classes.root}`}
            >
                <div>
                    <div className={classes.header} >Event bearbeiten
                        <IconButton className={classes.closebutton} onClick={onClose} >
                            <CloseIcon />
                        </IconButton>
                    </div>
                </div>
            </form>
        </Paper>
    );
};

export default EditEventForm;

额外注意点 #

• 你当前 Event.js 中嵌套定义 EditEvent 组件的写法会导致每次组件重渲染时重新创建该子组件，引发不必要的重绘，建议直接将 CardActions 相关JSX写在 Event 组件的返回值中，去掉内部嵌套的组件定义。
• 如果后续组件嵌套层级变深，再考虑使用Context、状态管理库等跨层级通信方案，当前直接父子传参是最简单、性能最好的实现。

内容的提问来源于stack exchange，提问作者Fynn