const [modalShow, setModalShow] = React.useState(false);

return (
    <> 
        <Button variant="primary" onClick={() => setModalShow(true)}> Launch vertically centered modal
        <MyVerticallyCenteredModal
            show={modalShow}
            onHide={() => setModalShow(false)}
        />
    </>
)

推荐答案

如果我理解正确,您可以使用如下props 将方法传递给子组件:

const TopComponent=()=>{
const [modalShow, setModalShow] = React.useState(false);
const MethodA=()=>{
   setModalShow(false)
}
return (
    <div>
      <Button onClick={MethodA}/>
      <MyVerticallyCenteredModal onClick={MethodA} />
    </div>
  );
};
const MyVerticallyCenteredModal = ({onClick}) => {
  return (
    <div>
      <Button onClick={onClick}/>
    </div>
  );
};

Javascript相关问答推荐

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

窗口.getComputedStyle()在MutationObserver中不起作用

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

Bootstrap动态选项卡在切换选项卡后保持活动状态,导致元素堆叠

在Vite React库中添加子模块路径

如何在Obsidian dataview中创建进度条

MathJax可以导入本地HTML文档使用的JS文件吗?

如何从Intl.DateTimeFormat中仅获取时区名称?

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

Angular 中的类型错误上不存在获取属性

类构造函数不能在没有用With Router包装的情况下调用

在HTML语言中调用外部JavaScript文件中的函数

为什么我的自定义元素没有被垃圾回收?

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

一个实体一刀VS每个实体多刀S

FireBase云函数-函数外部的ENV变量

将多个文本框中的输出合并到一个文本框中

如果对象中的字段等于某个值,则从数组列表中删除对象

如何压缩图像并将其编码为文本?

如何为两条动态路由创建一个页面?