Reactjs 通过react应用程序中的方法调用显示模态

在我们的react应用程序（我们使用reactstrap）中，我们有多个页面可以显示确认模式。我们不希望在每一页中都包含。有没有一种方法可以通过调用一个方法以编程方式实现这一点

---

我们可以直接在public index.html中使用普通引导模式，从util方法使用dom选择器并调用模式，但我们希望避免这种情况。有关于如何进行的建议吗

如果您只需要一个可以跨多个页面使用的模式（而不是在每个页面中放置一个模式），则可以将其放置在根组件中，通常命名为App

import Modal from "somewhere";

function App() {
  const [modal, setModal] = useState(false);
  return <>
    <Model isOpen={modal} />
    {/* If you need to toggle modal when clicking something in PageA, you can pass the prop down like this */}
    <PageA onToggleModel={()=>{setModal(!modal)}} /> 
    <PageB />
  </>;
}

从“某处”导入模态；
函数App（）{
const[modal，setModal]=useState（false）；
返回
{/*如果在单击PageA中的某个内容时需要切换模式，可以像这样向下传递道具*/}
{setModal（！modal）}}/>
;
}

---

以防万一，在每个页面中从“某处”导入模式不会导致最终捆绑包中的代码重复。这样做完全没问题。

下面是我们所做的

警报组件：

    import React, { useState } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

const Alert = props => {
  const [modal, setModal] = useState(props.open ? props.open : true);

  const toggle = () => {
    setModal(!modal);
    if (props.cb) {
      props.cb();
    }
    if (props.reloadPage) {
      window.location.reload();
    }
  };

  return (
    <div>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>{props.title}</ModalHeader>
        <ModalBody>{props.text}</ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Ok
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

export default Alert;

---

你能不能不制作一个使用模态代码的模态组件，但允许实际模态的动态内容？然后，您可以在需要时重用该模式组件，只需将所需的模式内容添加为子级。我们有具有动态内容的模式组件，但不希望将其包含在要显示的每个页面上。导入组件只需一行，如果不导入它，您就无法真正使用它，除非它在全球某个地方可用（React组件通常不是这样）。这些“多页”组件是否有反应？还是HTML文件？不太清楚为什么导入它会产生问题，这是为了避免重复。并试图强制调用模态。请看下面我关于如何实现它的回答。我们尝试了这种方法，但我们必须将道具传递给组件。看看我们在下面的答案中采取的方法。哦，我现在明白你的意思了，对不起，我以前很困惑。是的，要在没有手动

ReactDOM

渲染的情况下执行此操作，您必须使用React上下文API、Redux或大量的道具钻取。道具钻取很混乱，Redux是一个额外的依赖项，上下文API可能很冗长，有点学习曲线，尽管从技术上讲，它是正确的“反应”方式。虽然在现实中，如果你已经这样做了，并且它对你有效，那么回到上下文中去做可能不值得优先考虑。

import React from "react";
import ReactDOM from "react-dom";
import Alert from "./Alert";

const Util = {
  alert: (message, okCb, reload) => {
    ReactDOM.render(
      <Alert
        title="Done"
        text={message}
        cb={() => {
          ReactDOM.unmountComponentAtNode(
            document.getElementById("modalHolder")
          );
          if (okCb) {
            okCb();
          }
        }}
        reloadPage={reload}
      />,
      document.getElementById("modalHolder")
    );
  }
};

export default Util;

<div id="modalHolder"></div>

Util.alert("Data has been saved")