antd对话框多个嵌套点击里面的遮罩层如何生效

如果你想要在多个嵌套使用的 Antd 对话框中，点击里面的对话框遮罩层时，只关闭当前的对话框而不是关闭所有嵌套的对话框，可以通过在 `onCancel` 事件中阻止事件冒泡来实现。

具体来说，在打开对话框时，给对话框传入一个 `onCancel` 函数，该函数中通过 `e.stopPropagation()` 阻止事件冒泡，这样就可以防止点击里面的对话框遮罩层时关闭所有嵌套的对话框。

例如：

import { useState } from 'react';
import { Button, Modal } from 'antd';

function MyComponent() {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);

  const handleCancel1 = (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    setVisible1(false);
  };

  const handleCancel2 = (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    setVisible2(false);
  };

  return (
    <>
      <Button onClick={() => setVisible1(true)}>显示对话框1</Button>
      <Modal visible={visible1} onCancel={handleCancel1}>
        <Button onClick={() => setVisible2(true)}>显示对话框2</Button>
        <Modal visible={visible2} onCancel={handleCancel2}>
          对话框2内容
        </Modal>
      </Modal>
    </>
  );
}

在上面的代码中，我们在对话框1和对话框2中都设置了 `onCancel` 函数，并在该函数中调用 `e.stopPropagation()` 阻止事件冒泡，这样就可以实现点击里面的对话框遮罩层时，只关闭当前的对话框而不是关闭所有嵌套的对话框。