反应原生纸模态背景 - JavaScript

本文将介绍如何在 React 应用中使用原生纸模态背景。

什么是原生纸模态背景？

原生纸模态背景是一个常用的 UI 元素，用于在 Web 应用中创建一个阴影层，使得用户无法与页面交互，只能与模态窗口进行交互。它通常用于实现弹出窗口、警告、对话框等场景，以及防止用户在某些操作未完成时离开当前页面。

如何在 React 应用中使用原生纸模态背景？

React 提供了一个叫做 ReactDOM.createPortal 的 API，使得我们可以把元素渲染到其他的 DOM 节点上。利用这个 API，我们可以在我们的应用中使用原生纸模态背景。

首先，我们需要在我们的应用中创建一个阴影层组件。这个组件将会渲染为我们的原生纸模态背景。

import React from 'react';
import ReactDOM from 'react-dom';

const ModalBackdrop = ({ onClick }) => {
  return ReactDOM.createPortal(
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
      }}
      onClick={onClick}
    />,
    document.body
  );
};

代码解释：

• 我们使用 createPortal 将阴影层组件渲染到 document.body 中，而不是当前组件中。
• 组件接受一个 onClick 回调函数作为 prop，用于当用户点击阴影层时触发关闭弹窗的事件。
• 组件的样式设置为固定定位，直接覆盖整个视口。
• 背景色设置为半透明黑色。

接下来，我们可以在我们的应用中使用这个组件。我们创建一个弹窗组件 Modal，并在组件的最外层包裹原生纸模态背景组件 ModalBackdrop。

import React from 'react';

const Modal = ({ show, onClose, children }) => {
  return show ? (
    <>
      <ModalBackdrop onClick={onClose} />
      <div
        style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 10000,
          backgroundColor: 'white',
          padding: '1rem',
        }}
      >
        {children}
      </div>
    </>
  ) : null;
};

代码解释：

• Modal 组件接受三个 prop，show 表示是否显示弹窗，onClose 表示关闭弹窗的回调函数，children 表示弹窗的内容。
• 如果显示弹窗，我们返回一个 ModalBackdrop 组件和弹窗内容所在的 div。
• Modal 组件的样式设置为固定定位，居中显示。

最后，我们可以在我们的应用中使用这个弹窗组件了。

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleButtonClick = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Hello World</h1>

      <button onClick={handleButtonClick}>Open Modal</button>

      <Modal show={showModal} onClose={handleCloseModal}>
        <h2>This is a Modal</h2>
        <p>Some content goes here...</p>
        <button onClick={handleCloseModal}>Close Modal</button>
      </Modal>
    </div>
  );
};

export default App;

代码解释：

• 我们在 App 组件中使用 useState 来管理弹窗状态。
• 当用户点击按钮时，我们设置 showModal 为 true。
• 当用户点击阴影层或关闭按钮时，我们设置 showModal 为 false。

这样，我们就成功地使用原生纸模态背景来实现了一个弹窗组件。

总结

在本文中，我们介绍了如何在 React 应用中使用原生纸模态背景。我们使用了 ReactDOM.createPortal API 来渲染阴影层组件，并在弹窗组件中包裹这个组件来实现原生纸模态背景的效果。