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

Question

在我们的 React 应用程序（我们使用 Reactstrap）中，我们有多个页面可以显示确认模式。我们不想在每个页面中都包含 modal code。有没有办法通过调用方法以编程方式执行此操作？

我们可以直接在 public index.html 中使用纯 bootstrap 模态，并从 util 方法使用 dom 选择器并调用模态，但希望避免这种情况。关于如何解决这个问题的任何指示？

Answer 1

如果你想要的只是一个可以跨多个页面使用的模态框（而不是在每个页面中都放置一个模态框），你可以将它放在通常命名为 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 />
  </>;
}

以防万一，在每个页面中执行 import Modal from "somewhere" 不会导致最终包中出现重复代码。这样做完全没问题。

Answer 2

这是我们所做的。

警报组件：

    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;

Util.js:

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;

在 index.html 中我们创建了一个 dom 元素：

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

因此，要强制调用模态，请调用：

Util.alert("Data has been saved")

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

Showing modal via method call in react app

reactjs

reactstrap