使用Modal和Drawer的方法

参考 [WebhookCreateModal.tsx]

1. 定义Modal:

const WebhookCreateModal = NiceModal.create(() => {

  const modal = useModal()

  return (
    <KBModal
      title="Create a new Webhook"
      okText="Create"
      cancelText="Cancel"
      modal={modal}
      okButtonProps={{ loading: isPending }}
      onCancel={() => modal.hide()}
      onOk={onSubmit}
    >
      ...
    </KBModal>
  )
}

注意: 需要将modal={modal}传入KBModal

2. 父组件调用:

<WebhookCreateModal id="WebhookCreateModal"/>

// 调起:
NiceModal.show("WebhookCreateModal")

注意事项

1. 不要直接使用组件名调用,而是用ID。否则，可能无法带入其他context信息，例如atom的值。

不要用: NiceModal.show(WebhookCreateModal) 而是用: NiceModal.show("WebhookCreateModal")

2. 不要在Modal中嵌套定义Modal.

例如ModalA.tsx中，不要再嵌套ModalB.tsx:

// ModalA.tsx

function ModalA() {
  return (
    <ModalB id="modalB"/>
  )
}

在父组件，非Modal组件中定义:

<ModalA id="modalA"/>
<ModalB id="modalB"/>

同一个id的modal只需要在组件树的某个层级定义后即可随地调用。

根据这一原则，常用的modal可以在外层UserLayout.tsx,AdminLayout.tsx中定义。

官方组件文档

https://github.com/eBay/nice-modal-react