前言
在提示交互的情况下,函数式调用比组件式调用逻辑更清晰,代码也更简洁,如antd中,modal.confirm。
antd-Modal.confirm
在antd中,modal.confirm是使用函数调用来进行弹窗交互的。
//使用语法
Modal.confirm({
title: 'Confirm',
icon: <ExclamationCircleOutlined />,
content: 'Bla bla ...',
okText: '确认',
cancelText: '取消',
});
关于Modal.confirm源码
antd-design 版本:3.10.2,现在最新版本已经4.x了,但代码上变动不多。
export default function confirm(config: ModalFuncProps) {
//在body中插入个div,用于后续的弹窗的渲染
const div = document.createElement("div");
document.body.appendChild(div);
//confirm 初始化配置
let currentConfig = { ...config, close, visible: true } as any;
//弹窗关闭函数
function close(...args: any[]) {
//在初始化配置上在加上弹窗的配置
currentConfig = {
...currentConfig,
visible: false,
// 弹窗关闭隐藏后的调用,一般confirm的消息弹出,多次弹出情况较少,
// 所以直接调用destroy进行注销
afterClose: destroy.bind(this, ...args),
};
//这里判断是否是16,
if (IS_REACT_16) {
//隐藏渲染
render(currentConfig);
} else {
//直接注销
destroy(...args);
}
}
//更新组件
function update(newConfig: ModalFuncProps) {
currentConfig = {
...currentConfig,
...newConfig,
};
render(currentConfig);
}
//弹窗的注销
function destroy(...args: any[]) {
const unmountResult = ReactDOM.unmountComponentAtNode(div);
if (unmountResult && div.parentNode) {
div.parentNode.removeChild(div);
}
const triggerCancel =
args && args.length && args.some((param) => param && param.triggerCancel);
if (config.onCancel && triggerCancel) {
config.onCancel(...args);
}
}
//弹窗的渲染
function render(props: any) {
// ReactDOM.render 对已经渲染过的组件是不会重复重新渲染的,是做的更新操作,
// 具体参考ReactDOM.render源码
ReactDOM.render(<ConfirmDialog {...props} />, div);
}
render(currentConfig);
//返回注销、更新方法
return {
destroy: close,
update,
};
}
从源码中可以看出confirm其实是通过对外提供配置,然后ReactDom.render将弹框组件进行了渲染而达到的。
网友评论