ReactJS UI Ant Design 模态组件

Ant Design 是一个专注于提供高质量的 React 组件库，模态框是其中一个重要的组件之一。模态框在网页中被广泛应用，可以用于展示弹出提示、确认信息等。

使用说明

首先，需要安装 antd 和 react-dom 这两个依赖库：

npm install antd react-dom

在你的代码中引入 Modal 组件：

import { Modal } from 'antd'

基本用法

一个最基本的模态框需要包含以下元素：

1. 标题；
2. 内容；
3. 确定和取消按钮。

const showModal = () => {
  Modal.confirm({
    title: '确认删除此项？',
    content: '此操作无法撤回，请谨慎操作。',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      // TODO: 确定后执行的回调函数
    },
    onCancel: () => {
      // TODO: 取消后执行的回调函数
    },
  })
}

可定制化的模态框

Ant Design 的 Modal 组件支持自定义 Modal 的样式或是内容， 下面举个例子展示如何自定义 Modal 样式，来实现一个不同于 Ant Design 系统默认样式的 Modal。

const CustomModal = ({ visible, setVisible }) => {
  const [inputValue, setInputValue] = useState('')
  const handleOk = () => {
    // TODO: 点击确定后的逻辑
    setVisible(false)
  }
  const handleCancel = () => {
    setVisible(false)
  }

  return (
    <Modal
      visible={visible}
      title="这是自定义标题"
      okText="确定"
      cancelText="取消"
      onOk={handleOk}
      onCancel={handleCancel}
      closeIcon={<i className="close-icon" />} // 自定义关闭图标
      wrapClassName="modal-custom" // 自定义 Modal 样式
    >
      <Input value={inputValue} onChange={e => setInputValue(e.target.value)} />
    </Modal>
  )
}

API

Modal 的常用 API 说明如下。

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------------------------------- | -------------------- | ----------------- | | afterClose | Modal 完全关闭后的回调函数 | function | - | | bodyStyle | Modal 内容区域的样式 | React.CSSProperties | - | | cancelText | 取消按钮文本 | string | '取消' | | centered | 是否居中显示 Modal | boolean | false | | closable | 是否显示右上角的关闭按钮 | boolean | true | | closeIcon | 自定义关闭按钮 | ReactNode | <CloseOutlined />| | confirmLoading| 点击确定后是否显示加载状态，需与 onOk 配合使用 | boolean | false | | destroyOnClose| 关闭 Modal 时销毁子元素 | boolean | false | | footer | Footer 的内容 | ReactNode | <OkButton /> <CancelButton />| | forceRender | 渲染 Modal 子组件时是否进行 DOM 节点操作，当需要在 Modal 中操作子组件 DOM 结构，并且子组件结构会受到渲染顺序的影响时，需要设置此属性为 true | boolean | false | | getContainer | 指定 Modal 渲染的节点，将 Modal 挂载到当前组件的某个 DOM 元素下 | (instance: React.ReactInstance) => HTMLElement | - | | mask | 是否展示遮罩层 | boolean | true | | maskClosable | 点击遮罩层是否可关闭 Modal | boolean | true | | maskStyle | 遮罩层样式 | React.CSSProperties | - | | okText | 确定按钮文本 | string | '确定' | | okType | 确定按钮类型，可选值为 primary, ghost, dashed, link, text | string | 'primary' | | onCancel | 取消按钮回调函数 | function(e) | - | | onOk | 确定按钮回调函数 | function(e) | - | | title | Modal 的标题 | string/ ReactNode | - | | visible | Modal 是否可见 | boolean | - | | width | Modal 的宽度 | string/number | 520 | | wrapClassName | 对话框外层容器的类名 | string | - | | zIndex | 设置 Modal 的 z-index (负责遮罩层的 z-index) | number | 1000 |

更详细的 Modal API 说明，请参考官方文档。

总结

Ant Design 的 Modal 组件非常易于使用，重新定义信息框和确认框等简单的弹框只用修改一些样式代码，大大提高了组件代码复用性和代码维护性。