8.2. Modal

提案 (此规则针对 aPaaS 项目)

受新的 Hzero 弹框规范规定影响，ModalProvider 的 getContainer 属性必须传入 Hzero 标签容器的 Element，否则弹框会被挂到 body 节点上。

因此，为了完美实现 Tab 内弹框，aPaaS 项目在 apaas 包统一封装了 LowcodeModalProvider 组件。

提示

LowcodeModalProvider 使用方式与普通的 ModalProvider 一致。

C7N 组件提供了 useModal 钩子(获取 Modal 实例， 配合 ModalProvider 使用时可以传递上下文)，对于打开一个包含 Context 数据传递的弹框的操作，应当使用 useModal 返回的 modal 实例，调用该实例上的 open 方法。例：

import { Button, Form, useModal } from 'choerodon-ui/pro';

const App = () => {
  const modal = useModal();
  const handleOpenModal = React.useCallback(() =>
    modal.open({
      children: (
        <Form /> // Form will get context
      ),
    }), [modal]);
  return <Button onClick={handleOpenModal}>Open Modal</Button>
}

此篇维护者: