在AntDesignPro中，ModalForm和DrawerForm是我最常用的两个表单组件，配置上，他们有很多相同的地方，也有差异的地方，相比较而言，DrawerForm我使用的更多。

ModalForm

<ModalForm
        title={标题}
        width={600}
        visible={imageModalVisible}
        onVisibleChange={setImageModalVisible}
        onFinish={async () => {
          setImageModalVisible(false);
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          cancelText: '',
          okText: '关闭',
          bodyStyle: { maxHeight: 550, overflowY: 'auto' },
        }}
      >
        ...
      </ModalForm>

展示效果：

DrawerForm

<DrawerForm
        title="标题"
        width={720}
        visible={createModalVisible}
        onVisibleChange={setCreateModalVisible}
        onFinish={async (value) => {
          setCreateModalVisible(false);
        }}
        drawerProps={{
          destroyOnClose: true,    //退出Drawer时销毁
          maskClosable: false,    //点击空白区域，不退出
        }}
      >
      ...
      </DrawerForm>

展示效果：

可以看到基本配置都一样，不一样的地方：

1. modalForm需要设置高度，否则会自适应高度，影响用户体验

2. DrawerForm默认是页面高度，无需再单独配置高度，显得更加简洁方便，区域也更大，这也是我喜欢用DrawerForm的原因

3. ModalForm使用modalProps来设置Modal相关的配置，

4. DrawerForm使用drawerProps来设置Drawer相关的配置，destroyOnClose：表示退出时销毁Modal或Drawer，如果不销毁，再次打开时，会记录着上次显示的值，maskCloseable：表示点击空白区域，是否退出modal或drawer

5. ModalForm和DrawerForm默认都有两个按钮，取消和确定，

    在ModalForm中，可使用modalProps，设置okText和cancelText来修改按钮的文字，如果设置文字内容为空，按钮就会不显示，在一些不需要提交表单的页面经常会用到，

    但是在DrawerForm中，drawerProps里面便没有修改按钮文字的配置，在不需要按钮的时候，我使用footerStyle:{display:'none'}来隐藏底部栏

drawerProps={{
          destroyOnClose: true,
          maskClosable: false,
          footerStyle: { display: 'none' },
        }}