如何在 React 中创建可重用的自定义模态组件？

我对 React 中的模态概念有疑问。当使用带有 jQ​​uery 的服务器端渲染模板时，我习惯于有一个始终可用的空全局模态模板（包含在始终扩展的基本模板中）。然后，当进行 AJAX 调用时，我只是填充模态......如下所示：

$('.modal-global-content').html(content);
$('.modal-global').show();

那么如何在 React 中提出这个概念呢？

有几种方法可以做到这一点。第一个涉及从父组件传递模态状态。以下是如何做到这一点 - 首先与家长一起App.js成分：

// App.js

import React from "react";

import Modal from "./Modal";

const App = () => {
  const [showModal, updateShowModal] = React.useState(false);

  const toggleModal = () => updateShowModal(state => !state);

  return (
    <div>
      <h1>Not a modal</h1>
      <button onClick={toggleModal}>Show Modal</button>
      <Modal canShow={showModal} updateModalState={toggleModal} />
    </div>
  );
}

export default App;

这是Modal.js将呈现模式的子组件：

// Modal.js

import React from "react";

const modalStyles = {
  position: "fixed",
  top: 0,
  left: 0,
  width: "100vw",
  height: "100vh",
  background: "blue"
};

const Modal = ({ canShow, updateModalState }) => {
  if (canShow) {
    return (
      <div style={modalStyles}>
        <h1>I'm a Modal!</h1>
        <button onClick={updateModalState}>Hide Me</button>
      </div>
    );
  }

  return null;
};

export default Modal;

这种方式非常好，但如果您在应用程序的许多地方重复使用模式，它可能会有点重复。因此，我建议使用上下文 API。

为您的模式状态定义一个上下文对象，在应用程序顶部附近创建一个提供者，然后每当您有一个需要呈现模式的子组件时，您就可以呈现模式上下文的使用者。通过这种方式，您可以轻松地将模态嵌套在组件树中更深处，而不必一直向下传递回调。以下是执行此操作的方法 - 首先创建一个context.js file:

// context.js

import React from "react";

export const ModalContext = React.createContext();

现在更新了App.js file:

// App.js

import React from "react";

import { ModalContext } from "./context";
import Modal from "./Modal";

const App = () => {
  const [showModal, updateShowModal] = React.useState(false);

  const toggleModal = () => updateShowModal(state => !state);

  return (
    <ModalContext.Provider value={{ showModal, toggleModal }}>
      <div>
        <h1>Not a modal</h1>
        <button onClick={toggleModal}>Show Modal</button>
        <Modal canShow={showModal} updateModalState={toggleModal} />
      </div>
    </ModalContext.Provider>
  );
}

export default App;

最后更新了Modal.js file:

// Modal.js

import React from "react";

import { ModalContext } from "./context";

const modalStyles = {
  position: "fixed",
  top: 0,
  left: 0,
  width: "100vw",
  height: "100vh",
  background: "blue"
};

const Modal = () => {
  return (
    <ModalContext.Consumer>
      {context => {
        if (context.showModal) {
          return (
            <div style={modalStyles}>
              <h1>I'm a Modal!</h1>
              <button onClick={context.toggleModal}>Hide Me</button>
            </div>
          );
        }

        return null;
      }}
    </ModalContext.Consumer>
  );
};

export default Modal;

这是一个代码沙盒 https://codesandbox.io/s/practical-flower-xrcdb?file=/src/App.js使用上下文链接到工作版本。我希望这有帮助！