React实现蒙板功能

 创建一个简单的React组件来实现蒙板功能，你可以使用状态来控制蒙板的显示与隐藏。以下是一个简单的React组件示例，它包含了一个按钮来触发蒙板的显示，以及一个蒙板组件来显示内容。这个例子使用了React Hooks来管理状态。

首先，确保你已经安装了React和ReactDOM，如果没有，你可以通过npm或yarn来安装它们。

```bash
npm install react react-dom
```

然后，创建一个新的React组件文件，例如`ModalComponent.js`，并添加以下代码：

```jsx
import React, { useState } from 'react';

// Modal组件，用于显示蒙板内容
const Modal = ({ onClose, children }) => {
  return (
    <div className="overlay">
      <div className="overlay-content">
        {children}
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
};

// 主组件，用于控制蒙板的显示与隐藏
const ModalComponent = () => {
  const [showModal, setShowModal] = useState(false);

  // 显示蒙板
  const openModal = () => {
    setShowModal(true);
  };

  // 关闭蒙板
  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开蒙板</button>
      {showModal && (
        <Modal onClose={closeModal}>
          <p>这是一个蒙板内容。</p>
        </Modal>
      )}
    </div>
  );
};

export default ModalComponent;
```

在`Modal`组件中，我们定义了一个`overlay`类来创建蒙板的样式，以及一个`overlay-content`类来包含蒙板的内容。`onClose`属性是一个函数，用于在用户点击关闭按钮时调用，以关闭蒙板。

在`ModalComponent`中，我们使用`useState`钩子来管理`showModal`状态。当用户点击按钮时，`openModal`函数会被调用，设置`showModal`为`true`，从而显示蒙板。蒙板内部有一个关闭按钮，点击它会调用`closeModal`函数，将`showModal`设置为`false`，从而隐藏蒙板。

最后，你可以在你的React应用中导入并使用这个`ModalComponent`组件：

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ModalComponent from './ModalComponent';

ReactDOM.render(
  <React.StrictMode>
    <ModalComponent />
  </React.StrictMode>,
  document.getElementById('root')
);
```

确保你的HTML文件中有一个ID为`root`的元素，React应用将会挂载在这个元素上。

请注意，这个例子中的样式是最基本的，你可能需要根据你的设计需求来调整CSS。此外，这个例子没有处理异步请求，如果你需要在蒙板中显示异步加载的内容，你可以在`Modal`组件中添加相应的逻辑。