一、概述
Modal 是 Ant Design 中常用的组件之一，用于弹出模态对话框。Antd Modal 组件提供了多种弹窗窗体形态、自定义 footer、自定义图标等功能，使用起来非常便捷。本文将介绍Antd Modal的基本用法、可配置项以及一些扩展应用。
二、基本用法
使用 Antd Modal 组件需要先安装 antd 包，然后引入 Modal 组件，比如：
import { Modal } from 'antd';
接下来，我们可以通过以下方法来新建一个 Modal 对话框，其中 title 表示模态对话框的标题，visible 表示是否显示，onOk 和 onCancel 分别对应确认和取消按钮的回调函数：
class App extends React.Component {
state = {
visible: false,
};
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
render() {
return (
Some contents...
Some contents...
Some contents...
);
}
}
以上代码演示了如何实现一个基本的 Modal 对话框。其中，我们在 Button 组件的 onClick 函数中调用 showModal 函数，展示一个 Modal 对话框。Modal 的 visible 属性控制对话框的显隐状态，onOk 和 onCancel 分别对应确认和取消按钮的回调函数。这些都是 Antd Modal 常规用法。
三、自定义 Modal
在应用实际场景中，我们可能需要自定义 Modal 对话框的样式和交互行为。Antd Modal 组件提供了多种接口来满足这些需求。
修改宽度和高度
在某些场景下，我们可能需要调整 Modal 的宽度和高度。
可通过设置 width 和 height 定义自定义的 Modal 对话框宽度和高度。如下代码所示，我们定义了 Modal 的宽度为 800px，高度为 400px：
, , ]} > Some contents...
Some contents...
Some contents...
上述代码片段展示了如何定义一种自定义的 Modal 窗口，其中设置了 width 和 height 两个属性，分别控制窗口的宽度和高度。
自定义 footer
我们可以通过 footer 属性来自定义 Modal 对话框底部的按钮组。使用该属性来自定义按钮组时，需要传入一个数组，每个元素都是一个 Button 组件对象。如下所示：
, , ]} > Some contents...
Some contents...
Some contents...
在上述代码里，我们通过定义一个 footer 数组，来自定义 Modal 的按钮组。其中，数组的每一项都是一个 antd Button 组件对象。
自定义图标
在某些情况下，我们需要根据业务需求，自定义 Modal 下的图标。Antd Modal 提供了自定义 Icon 的接口。如下所示：
} onCancel={this.handleClose} width={800} footer={[ , , ]} > Some contents...
Some contents...
Some contents...
上述代码展示了如何通过设置 icon 属性，来自定义 Modal 的图标。其中，我们使用 antd Icon 组件来渲染图标。
四、扩展应用
除了上述基本用法和自定义设置，Antd Modal 组件还可以与其他 Antd 组件进行组合使用，以实现更多的功能。
Antd Modal + Form 表单
在业务开发中，我们可能需要在 Modal 中展示一个表单。这个时候可以将表单模块单独抽离出来，使用 Form.create()(WrappedModal) 包裹起来。如下代码所示：
const WrappedModalForm = Form.create({ name: 'coordinated' })(My Modal Form);
class App extends React.Component {
state = {
visible: false,
};
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
render() {
return (
上述代码里，我们抽离出了一个 MyModalForm 组件，并使用 Form.create()(WrappedModal) 对其进行包裹，以实现表单的加载。此后，我们在 Modal 组件的 onOk 函数中，可以通过 WrappedModalForm 组件的某个函数，来获取表单的数据，以实现更复杂的业务操作。
Antd Modal + Table 表格
在实际开发中，有时候我们也需要将一个 Table 表组件嵌入到 Modal 对话框中，以实现弹出窗口的功能。如下代码所示：
class MyModalTable extends React.Component {
render() {
return (
);
}
}
class MyModalTableWrapper extends React.Component {
state = {
visible: false,
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
showModal = () => {
this.setState({
visible: true,
});
};
render() {
return (
);
}
}
上述代码里，我们定义了 MyModalTable 和 MyModalTableWrapper 两个组件。其中，MyModalTable 部分是一个常见的 Antd Table 组件，MyModalTableWrapper 则是一个包装后的 Modal 对话框。我们将 MyModalTable 组件置于 Modal 组件中，以实现在 Modal 中展示 Table 的功能。
Antd Modal + Tree 树型结构
在实际业务开发中，有时候我们需要在 Modal 中嵌入 Tree 树型结构组件，以实现一个可视化的分类选项。如下代码所示：
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
{
title: 'Child Node2',
value: '0-0-1',
key: '0-0-1',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
},
];
class MyModalTree extends React.Component {
render() {
const { dispatch, data } = this.props;
return (
{
console.log('MyModalTree check:', checkedKeys);
dispatch({
type: 'example/toggleTreeKeys',
payload: checkedKeys,
});
}}
treeData={treeData}
/>
);
}
}
class MyModalTreeWrapper extends React.Component {
state = {
visible: false,
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
showModal = () => {
this.setState({
visible: true,
});
};
render() {
return (
);
}
}
上述代码演示了如何将 MyModalTree 组件嵌入到 Modal 中，以实现在弹出层中展示树型结构组件的功能。在 MyModalTree 中，我们使用了 antd Tree 组件来实现树型结构的展示和交互。
总结
以上就是本文对 Antd Modal 组件的详细讲解。我们在本文中介绍了 Antd Modal 的基本用法、自定义设置以及一些扩展应用。Antd Modal 可以轻松实现弹窗窗体、自定义 footer、自定义图标等功能，非常适用于业务开发中。同时，Antd Modal 还可以和其他 Antd 组件进行组合使用，以实现更多的功能。希望本文的内容能够帮助读者了解 Antd Modal 组件的使用。
