Javascript 如何从钩子中的另一个组件打开模态？

在React项目中，我需要从另一个组件打开模态。我从StackOverflow那里找到了一些建议性的问题，但还没有被说服。因为我需要使模态组件在所有组件之间可重用。参考下面的代码

主页.js

const HomePage = () => {
  return (
    <>
      <button onClick={() => setLoginModalShow(true)}>Open Modal</button>
    </>
  );
};

const主页=（）=>{
返回(
setLoginModalShow（true）}>打开模式
);
};

我创建了下面的文件以导出其他文件，并使其在其他组件中有用

commonLogin.js

import LoginModal from "./LoginModal";

export const setLoginModalShow = (props) => {
  console.log("PROPS", props);
  return <LoginModal showModal={props} />;
};

从“/LoginModal”导入LoginModal；
导出常量setLoginModalShow=（道具）=>{
控制台日志（“道具”，道具）；
返回；
};

这是模态分量

const LoginModal = (props) => {
  const [loginModalShow, setLoginModalShow] = useState(props.showModal);

  console.log("PROPS in MODAL", props);
  return (
    <>
      <Modal
        show={loginModalShow}
        onHide={setLoginModalShow}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Logout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Are you sure to Logout?</h4>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setLoginModalShow(false)}>Cancel</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

const HomePage = () => {
  const [showLogin, setShowLogin] = useState(false);
  return (
    <>
      <button onClick={() => setShowLogin(true)}>Open Modal</button>
      <LoginModal show={showLogin} close={() => setShowLogin(false)} />
    </>
  );
};

constloginmodal=（props）=>{
const[loginModalShow，setLoginModalShow]=useState（props.showmodel）；
日志（“模式中的道具”，道具）；
返回(
注销
你确定要注销吗？
SetLoginModelShow（false）}>取消
);
};

请参阅代码沙盒链接：。

---

访问页面后，单击“打开模式”按钮，以控制对父组件的显示/隐藏

const LoginModal = (props) => {
  const [loginModalShow, setLoginModalShow] = useState(props.showModal);

  console.log("PROPS in MODAL", props);
  return (
    <>
      <Modal
        show={loginModalShow}
        onHide={setLoginModalShow}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Logout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Are you sure to Logout?</h4>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setLoginModalShow(false)}>Cancel</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

const HomePage = () => {
  const [showLogin, setShowLogin] = useState(false);
  return (
    <>
      <button onClick={() => setShowLogin(true)}>Open Modal</button>
      <LoginModal show={showLogin} close={() => setShowLogin(false)} />
    </>
  );
};

const主页=（）=>{
const[showLogin，setShowLogin]=useState（false）；
返回(
setShowLogin（真）}>打开模式
setShowLogin（假）}/>
);
};

---

感谢您的回复。。。完美地工作