如何在React中创建可重用的自定义模态组件? [英] How to create reusable custom modal component in React?

问题描述

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

I have a problem with the concept of modals in React. When using server side rendered templates with jQuery I was used to have one empty global modal template always available (included in base template that was always extended). Then when making AJAX call I just populated modal..something like this:

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

那么我该如何在React中提出这个概念?

So how do I make this concept in React?

推荐答案

有几种方法可以做到这一点.第一个涉及从父组件传入模态状态.这样做的方法-首先使用父 App.js 组件:

There are a few ways of doing this. The first involves passing in the modal state from a parent component. Here's how to do this - first with the parent App.js component:

// 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 子组件:

And here's the Modal.js child component that will render the modal:

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

This way is perfectly fine, but it can get a bit repetitive if you're reusing the modal in many places throughout your app. So instead, I would recommend using the context API.

为模态状态定义上下文对象，在应用程序顶部附近创建一个提供程序，然后只要您有需要呈现模态的子组件，就可以呈现模态上下文的使用者.这样，您可以轻松地将模态更深地嵌套在组件树中，而不必完全传递回调.这样做的方法-首先创建一个 context.js 文件:

Define a context object for your modal state, create a provider near the top of your application, then whenever you have a child component that needs to render the modal, you can render a consumer of the modal context. This way you can easily nest your modal deeper in your component tree without having to pass callbacks all the way down. Here's how to do this - first by creating a context.js file:

// 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 链接，该链接可以正常工作使用上下文的版本.我希望这会有所帮助！

Here's a Codesandbox link with a working version using context. I hope this helps!

这篇关于如何在React中创建可重用的自定义模态组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！