react hooks 实现蒙层

你可以使用 React Hooks 来实现蒙层效果。下面是一个简单的示例代码：

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      {showModal && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>Modal Content</h2>
            <p>This is the modal content.</p>
            <button onClick={closeModal}>Close Modal</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;

在上面的代码中，我们使用了 `useState` Hook 来管理蒙层的显示状态。初始状态下，蒙层是隐藏的。当点击 "Open Modal" 按钮时，`openModal` 函数会将 `showModal` 设置为 `true`，显示蒙层。蒙层的内容包括一个标题、一段文字和一个 "Close Modal" 的按钮。点击 "Close Modal" 按钮时，`closeModal` 函数会将 `showModal` 设置为 `false`，隐藏蒙层。

你可以根据自己的需求来修改蒙层的样式和内容。希望这个示例能帮助到你！