maskClosable写法怎么实现

`maskClosable` 是一个常用的属性，它表示当用户点击遮罩层时，是否关闭弹窗。下面是一个实现 `maskClosable` 的示例代码：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ visible, onClose, maskClosable, children }) {
  const handleClickMask = (e) => {
    if (maskClosable && e.target === e.currentTarget) {
      onClose();
    }
  };

  return visible ? (
    <div className="modal-wrapper" onClick={handleClickMask}>
      <div className="modal">
        <div className="modal-content">{children}</div>
      </div>
    </div>
  ) : null;
}

function App() {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>
      <Modal visible={visible} onClose={handleClose} maskClosable={true}>
        <h2>Modal Content</h2>
      </Modal>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中，我们在 `Modal` 组件中添加了一个 `handleClickMask` 函数来监听点击遮罩层的事件。如果 `maskClosable` 为 `true`，并且用户点击的是遮罩层本身（即 `e.target === e.currentTarget`），则调用 `onClose` 函数来关闭弹窗。在 `App` 组件中，我们将 `maskClosable` 设置为 `true`，这样用户就可以通过点击遮罩层来关闭弹窗了。