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

Question

我对 React 中的模态概念有疑问。当使用带有 jQ​​uery 的服务器端渲染模板时，我习惯有一个始终可用的空全局模态模板(包含在始终扩展的基本模板中)。然后在进行 AJAX 调用时，我只是填充了 modal.. 类似这样的东西:

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

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

Answer 1

有几种方法可以做到这一点。第一个涉及从父组件传入模态状态。下面是如何做到这一点 - 首先是父 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 文件:

// context.js

import React from "react";

export const ModalContext = React.createContext();

现在更新了 App.js 文件:

// 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 文件:

// 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;

这是 Codesandbox使用上下文链接到工作版本。我希望这会有所帮助!