Ant Design Modal.useModal 使用指南contextHolder 与 Promise await 完全解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 中Modal.confirm等静态方法通过ReactDOM.render动态创建 React 实例导致其无法读取调用位置的 React Context如ConfigProvider的locale、prefixCls、theme以及业务自定义 Context。本指南围绕 components/modal/demo/hooks.md 演示场景系统讲解Modal.useModal如何通过contextHolder打通 Context 链路并深入源码剖析其底层实现以及仅 hooks 方法独有的 Promiseawait能力。读完你将能正确使用useModal替代静态方法、理解contextHolder的挂载规则并熟练运用await modal.confirm()处理异步确认流程。一、问题背景为什么静态方法读不到 ContextAnt Design 的Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm属于静态方法。查看 confirm.tsx 的源码可以看到这些方法内部会调用reactRenderrc-util/lib/React/render将ConfirmDialogWrapper动态渲染到一个document.createDocumentFragment()容器中const container document.createDocumentFragment(); // ... reactRender( ConfigProvider prefixCls{rootPrefixCls} iconPrefixCls{iconPrefixCls} theme{theme} {global.holderRender ? global.holderRender(dom) : dom} /ConfigProvider, container, );由于是全新的 React 实例其 Context 树与业务代码所在位置完全隔离因此你在组件内通过ConfigProvider配置的locale、prefixCls或者自定义的Context.Provider都无法在静态方法创建的弹窗中读取到。官方 FAQ 中对此有明确解释见 index.en-US.mdantd 在调用 Modal 静态方法时通过ReactDOM.render动态创建 React 实例其 context 与原始代码所在位置的 context 不同。解决方案就是本指南的主角Modal.useModal()。二、Modal.useModal 基础用法Modal.useModal是一个 React Hook返回一个元组const [modal, contextHolder] Modal.useModal();modal拥有与Modal.methodconfirm/info/success/error/warning相同的创建方法集合contextHolder必须插入到组件子节点中渲染为一个真实的 React 节点它决定了弹窗所能读取的 Context 范围。以 demo/hooks.tsx 为例完整演示如下import React, { createContext } from react; import { Button, Modal, Space } from antd; const ReachableContext createContextstring | null(null); const UnreachableContext createContextstring | null(null); const config { title: Use Hook!, content: ( ReachableContext.Consumer{(name) Reachable: ${name}!}/ReachableContext.Consumer br / UnreachableContext.Consumer{(name) Unreachable: ${name}!}/UnreachableContext.Consumer / ), }; const App: React.FC () { const [modal, contextHolder] Modal.useModal(); return ( ReachableContext.Provider valueLight Space Button onClick{async () { const confirmed await modal.confirm(config); console.log(Confirmed: , confirmed); }} Confirm /Button Button onClick{() { modal.warning(config); }}Warning/Button Button onClick{async () { modal.info(config); }}Info/Button Button onClick{async () { modal.error(config); }}Error/Button /Space {/* contextHolder 必须放在你想访问的 Context 之内 */} {contextHolder} {/* 由于 contextHolder 不在该 Provider 内部此 Context 无法被弹窗访问 */} UnreachableContext.Provider valueBamboo / /ReachableContext.Provider ); }; export default App;该示例的语义一目了然contextHolder位于ReachableContext.Provider valueLight内部因此弹窗内容能读取到Reachable: Light!UnreachableContext.Provider声明在contextHolder之后React 中兄弟节点不构成 Provider 关系因此弹窗内容中显示为Unreachable: !默认值 null。对应的演示说明记录在 demo/hooks.md通过Modal.useModal创建支持读取 context 的contextHolder其中仅有 hooks 方法支持 Promiseawait操作。三、contextHolder 的挂载位置决定 Context 边界contextHolder本质上是一个ElementsHolder组件由useModal在末尾返回return [fns, ElementsHolder keymodal-holder ref{holderRef} /] as const;结合 index.en-US.md 中的 FAQ 说明挂载规则可以总结为必须把contextHolder插入到子元素节点中才会生效——如果不需要 Context 连接直接使用静态方法即可contextHolder所在位置决定弹窗能拿到哪些 Context位于Context1.Provider内 → 弹窗可获得Context1的 context位于Context2.Provider外 → 弹窗拿不到Context2的 context。const [modal, contextHolder] Modal.useModal(); return ( Context1.Provider valueAnt {/* contextHolder 在 Context1 内弹窗可读取 Context1 */} {contextHolder} Context2.Provider valueDesign {/* contextHolder 在 Context2 外弹窗读不到 Context2 */} /Context2.Provider /Context1.Provider );这一设计同样适用于ConfigProvider的locale、prefixCls、theme等全局配置只要contextHolder挂在ConfigProvider内部useModal创建的弹窗就能正确继承这些配置。hook.test.tsx中的context support config direction用例正是验证了这一点components/modal/tests/hook.test.tsx在ConfigProvider directionrtl内使用modal.confirm({ content: Input / })渲染出的输入框带有ant-input-rtl类名。四、仅 hooks 方法支持的 Promise await这是useModal区别于静态方法的另一大核心能力只有通过 hooks 创建的modal对象上的方法支持await。// 点击 onOk 返回 true点击 onCancel 返回 false const confirmed await modal.confirm({ ... });返回对象上的then方法定义于 useModal/index.tsx 的类型声明中export type ModalFuncWithPromise (...args: ParametersModalFunc) ReturnTypeModalFunc { thenT(resolve: (confirmed: boolean) T, reject: VoidFunction): PromiseT; }; export type HookAPI OmitRecordkeyof ModalStaticFunctions, ModalFuncWithPromise, warn;注意HookAPI通过Omit..., warn剔除了warn即 hooks 方法集合为confirm、info、success、error、warning五种详见 useModal/index.tsx 中fns的构造。4.1 Promise 与 onConfirm 的桥接在getConfirmFunc内部每次调用都会创建一个Promiseboolean并记录resolvePromise与silent标志let resolvePromise: (confirmed: boolean) void; const promise new Promiseboolean((resolve) { resolvePromise resolve; }); let silent false;当用户点击确定/取消按钮时HookModal通过onConfirm{(confirmed) resolvePromise(confirmed)}回调把结果boolean交给 Promise 的 resolver见 useModal/HookModal.tsx 的 props 定义。而then方法的实现为then: (resolve) { silent true; return promise.then(resolve); },关键细节是调用then即执行await时会把silent置为true。silent通过isSilent{() silent}传给HookModal其作用是处于 await 模式下弹窗关闭时不再向外抛出异常HookModalProps 中注释为 Do not throw if is await mode。这样开发者可以放心使用try/catch之外的简单await语法而不会因弹窗被关闭而收到未处理的 Promise 拒绝。4.2 异步 onOk 与 await 配合hook.test.tsx中的support await用例演示了典型场景onOk本身是异步函数第一次点击时返回Promise.reject()模拟校验失败弹窗不关闭第二次点击成功后await才得到truelastResult await modal.confirm({ content: Input /, onOk: async () { if (notReady) { notReady false; return Promise.reject(); } }, });测试断言第一次点击后lastResult为 falsy第二次点击后为true验证了await结果与确定/取消操作的对应关系。此外esc用例确认了按 ESC 关闭时await返回false。五、深入源码useModal 的底层实现原理5.1 ElementsHolder 与 usePatchElementcontextHolder渲染的是ElementsHolder组件其内部使用usePatchElement位于 components/_util/hooks/usePatchElement.ts维护一个元素列表。patchElement会把新元素追加到列表中并返回一个用于移除该元素的闭包函数——机制类似useEffect的清理函数const patchElement React.useCallback((element: React.ReactElement) { setElements((originElements) [...originElements, element]); return () { setElements((originElements) originElements.filter((ele) ele ! element)); }; }, []);useModal每次调用modal.confirm(...)时都会构造一个HookModal元素并调用holderRef.current?.patchElement(modal)将其注入contextHolder内部。因为HookModal是在组件树中渲染的所以它能自然而然地继承当前位置的所有 React Context。5.2 HookModal承载配置、更新与销毁每个通过 hooks 创建的弹窗最终渲染为HookModaluseModal/HookModal.tsx它通过useImperativeHandle暴露两个实例方法React.useImperativeHandle(ref, () ({ destroy: close, update: (newConfig: ModalFuncProps) { setInnerConfig((originConfig) ({ ...originConfig, ...newConfig, })); }, }));update合并新配置支持动态更新标题、内容等测试update before render用例验证了在渲染前调用update也能生效最终标题显示为更新后的值destroy调用close设置open为false并触发关闭动画关闭动画结束后执行afterClose。HookModal内部基于ConfirmDialog渲染并自动处理okCancel默认值innerConfig.okCancel ?? innerConfig.type confirm、从ConfigContext读取direction、通过useLocale读取okText/cancelText等本地化文案。5.3 返回实例destroy / update / thenmodal.confirm()返回的实例对象见 useModal/index.tsx包含三个能力方法说明destroy销毁当前弹窗若弹窗尚未渲染通过actionQueue队列延迟执行update更新当前弹窗配置同样支持渲染前的延迟更新then仅 hooksPromise 链式调用支持await操作源码中destroy与update都处理了调用时机早于渲染完成的边缘情况如果modalRef.current尚不存在就把操作推入actionQueue待useEffect触发时统一执行React.useEffect(() { if (actionQueue.length) { const cloneQueue [...actionQueue]; cloneQueue.forEach((action) { action(); }); setActionQueue([]); } }, [actionQueue]);5.4 与静态方法共用的 destroyFns 与 destroyAll无论静态方法还是 hooks 方法关闭函数都会被推入destroyFnscomponents/modal/destroyFns.tsconst destroyFns: Array() void [];静态方法的close在 confirm.tsx 中销毁时会从destroyFns中移除自身hooks 方法在closeFunc holderRef.current?.patchElement(modal)之后也会destroyFns.push(closeFunc)。Modal.destroyAll()见 components/modal/index.tsx则遍历弹出所有关闭函数Modal.destroyAll function destroyAllFn() { while (destroyFns.length) { const close destroyFns.pop(); if (close) { close(); } } };hook.test.tsx的destroyAll works with contextHolder用例验证了通过 hooks 连续弹出info、success、warning、error四种弹窗后调用Modal.destroyAll()可将它们全部关闭。六、hooks 方法与静态方法对比维度静态方法Modal.confirm等hooks 方法modal.confirm等创建方式动态ReactDOM.render到独立容器confirm.tsx在组件树内通过ElementsHolder渲染useModal/index.tsxContext 读取无法读取业务 Context可读取contextHolder所在位置的 ContextPromise await不支持支持返回对象含then使用前提无需挂载任何节点必须把contextHolder插入子节点典型场景不依赖上下文的简单提示需要ConfigProvider配置、本地化或业务 Context 的弹窗七、使用注意事项contextHolder必须挂载如果你不需要 Context 连接直接用静态方法即可无需使用 hooks挂载位置决定 Context 边界把contextHolder放在目标Provider内部且放在所有需要访问的 Provider 之内若存在多个 Provider注意contextHolder与各 Provider 的嵌套先后关系onCancel回调参数HookModal的close逻辑会解析参数中的triggerCancel命中时调用innerConfig.onCancel?.(() {}, ...args.slice(1))。hook.test.tsx的the callback close should be a method when onCancel has a close parameter用例表明当onCancel声明close参数时需要显式调用close()才会真正关闭弹窗点击取消按钮默认不会自动关闭简化 contextHolder 植入若项目中多处使用useModal、useMessage、useNotification可使用 App 包裹组件App统一管理这些 hooks 的contextHolder避免手动植入的繁琐静态方法弹窗内容不更新的 FAQModal 在关闭时会使用 memo 避免内容跳动若在 Modal 中使用 Form需要在effect中调用resetFields重置initialValues。八、结语Modal.useModal是 Ant Design 中既要命令式调用、又要 Context 感知场景下的标准答案。理解其背后contextHolder的挂载规则、usePatchElement的元素注入机制以及 Promiseawait的silent静默约定能帮助你在实际项目中写出更健壮的弹窗交互逻辑。相关演示与测试源码均可在此仓库中继续深入研读demo/hooks.tsx、useModal/index.tsx、useModal/HookModal.tsx、components/modal/tests/hook.test.tsx。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Modal.useModal 使用指南：contextHolder 与 Promise await 完全解析
Ant Design Modal.useModal 使用指南contextHolder 与 Promise await 完全解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 中Modal.confirm等静态方法通过ReactDOM.render动态创建 React 实例导致其无法读取调用位置的 React Context如ConfigProvider的locale、prefixCls、theme以及业务自定义 Context。本指南围绕 components/modal/demo/hooks.md 演示场景系统讲解Modal.useModal如何通过contextHolder打通 Context 链路并深入源码剖析其底层实现以及仅 hooks 方法独有的 Promiseawait能力。读完你将能正确使用useModal替代静态方法、理解contextHolder的挂载规则并熟练运用await modal.confirm()处理异步确认流程。一、问题背景为什么静态方法读不到 ContextAnt Design 的Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm属于静态方法。查看 confirm.tsx 的源码可以看到这些方法内部会调用reactRenderrc-util/lib/React/render将ConfirmDialogWrapper动态渲染到一个document.createDocumentFragment()容器中const container document.createDocumentFragment(); // ... reactRender( ConfigProvider prefixCls{rootPrefixCls} iconPrefixCls{iconPrefixCls} theme{theme} {global.holderRender ? global.holderRender(dom) : dom} /ConfigProvider, container, );由于是全新的 React 实例其 Context 树与业务代码所在位置完全隔离因此你在组件内通过ConfigProvider配置的locale、prefixCls或者自定义的Context.Provider都无法在静态方法创建的弹窗中读取到。官方 FAQ 中对此有明确解释见 index.en-US.mdantd 在调用 Modal 静态方法时通过ReactDOM.render动态创建 React 实例其 context 与原始代码所在位置的 context 不同。解决方案就是本指南的主角Modal.useModal()。二、Modal.useModal 基础用法Modal.useModal是一个 React Hook返回一个元组const [modal, contextHolder] Modal.useModal();modal拥有与Modal.methodconfirm/info/success/error/warning相同的创建方法集合contextHolder必须插入到组件子节点中渲染为一个真实的 React 节点它决定了弹窗所能读取的 Context 范围。以 demo/hooks.tsx 为例完整演示如下import React, { createContext } from react; import { Button, Modal, Space } from antd; const ReachableContext createContextstring | null(null); const UnreachableContext createContextstring | null(null); const config { title: Use Hook!, content: ( ReachableContext.Consumer{(name) Reachable: ${name}!}/ReachableContext.Consumer br / UnreachableContext.Consumer{(name) Unreachable: ${name}!}/UnreachableContext.Consumer / ), }; const App: React.FC () { const [modal, contextHolder] Modal.useModal(); return ( ReachableContext.Provider valueLight Space Button onClick{async () { const confirmed await modal.confirm(config); console.log(Confirmed: , confirmed); }} Confirm /Button Button onClick{() { modal.warning(config); }}Warning/Button Button onClick{async () { modal.info(config); }}Info/Button Button onClick{async () { modal.error(config); }}Error/Button /Space {/* contextHolder 必须放在你想访问的 Context 之内 */} {contextHolder} {/* 由于 contextHolder 不在该 Provider 内部此 Context 无法被弹窗访问 */} UnreachableContext.Provider valueBamboo / /ReachableContext.Provider ); }; export default App;该示例的语义一目了然contextHolder位于ReachableContext.Provider valueLight内部因此弹窗内容能读取到Reachable: Light!UnreachableContext.Provider声明在contextHolder之后React 中兄弟节点不构成 Provider 关系因此弹窗内容中显示为Unreachable: !默认值 null。对应的演示说明记录在 demo/hooks.md通过Modal.useModal创建支持读取 context 的contextHolder其中仅有 hooks 方法支持 Promiseawait操作。三、contextHolder 的挂载位置决定 Context 边界contextHolder本质上是一个ElementsHolder组件由useModal在末尾返回return [fns, ElementsHolder keymodal-holder ref{holderRef} /] as const;结合 index.en-US.md 中的 FAQ 说明挂载规则可以总结为必须把contextHolder插入到子元素节点中才会生效——如果不需要 Context 连接直接使用静态方法即可contextHolder所在位置决定弹窗能拿到哪些 Context位于Context1.Provider内 → 弹窗可获得Context1的 context位于Context2.Provider外 → 弹窗拿不到Context2的 context。const [modal, contextHolder] Modal.useModal(); return ( Context1.Provider valueAnt {/* contextHolder 在 Context1 内弹窗可读取 Context1 */} {contextHolder} Context2.Provider valueDesign {/* contextHolder 在 Context2 外弹窗读不到 Context2 */} /Context2.Provider /Context1.Provider );这一设计同样适用于ConfigProvider的locale、prefixCls、theme等全局配置只要contextHolder挂在ConfigProvider内部useModal创建的弹窗就能正确继承这些配置。hook.test.tsx中的context support config direction用例正是验证了这一点components/modal/tests/hook.test.tsx在ConfigProvider directionrtl内使用modal.confirm({ content: Input / })渲染出的输入框带有ant-input-rtl类名。四、仅 hooks 方法支持的 Promise await这是useModal区别于静态方法的另一大核心能力只有通过 hooks 创建的modal对象上的方法支持await。// 点击 onOk 返回 true点击 onCancel 返回 false const confirmed await modal.confirm({ ... });返回对象上的then方法定义于 useModal/index.tsx 的类型声明中export type ModalFuncWithPromise (...args: ParametersModalFunc) ReturnTypeModalFunc { thenT(resolve: (confirmed: boolean) T, reject: VoidFunction): PromiseT; }; export type HookAPI OmitRecordkeyof ModalStaticFunctions, ModalFuncWithPromise, warn;注意HookAPI通过Omit..., warn剔除了warn即 hooks 方法集合为confirm、info、success、error、warning五种详见 useModal/index.tsx 中fns的构造。4.1 Promise 与 onConfirm 的桥接在getConfirmFunc内部每次调用都会创建一个Promiseboolean并记录resolvePromise与silent标志let resolvePromise: (confirmed: boolean) void; const promise new Promiseboolean((resolve) { resolvePromise resolve; }); let silent false;当用户点击确定/取消按钮时HookModal通过onConfirm{(confirmed) resolvePromise(confirmed)}回调把结果boolean交给 Promise 的 resolver见 useModal/HookModal.tsx 的 props 定义。而then方法的实现为then: (resolve) { silent true; return promise.then(resolve); },关键细节是调用then即执行await时会把silent置为true。silent通过isSilent{() silent}传给HookModal其作用是处于 await 模式下弹窗关闭时不再向外抛出异常HookModalProps 中注释为 Do not throw if is await mode。这样开发者可以放心使用try/catch之外的简单await语法而不会因弹窗被关闭而收到未处理的 Promise 拒绝。4.2 异步 onOk 与 await 配合hook.test.tsx中的support await用例演示了典型场景onOk本身是异步函数第一次点击时返回Promise.reject()模拟校验失败弹窗不关闭第二次点击成功后await才得到truelastResult await modal.confirm({ content: Input /, onOk: async () { if (notReady) { notReady false; return Promise.reject(); } }, });测试断言第一次点击后lastResult为 falsy第二次点击后为true验证了await结果与确定/取消操作的对应关系。此外esc用例确认了按 ESC 关闭时await返回false。五、深入源码useModal 的底层实现原理5.1 ElementsHolder 与 usePatchElementcontextHolder渲染的是ElementsHolder组件其内部使用usePatchElement位于 components/_util/hooks/usePatchElement.ts维护一个元素列表。patchElement会把新元素追加到列表中并返回一个用于移除该元素的闭包函数——机制类似useEffect的清理函数const patchElement React.useCallback((element: React.ReactElement) { setElements((originElements) [...originElements, element]); return () { setElements((originElements) originElements.filter((ele) ele ! element)); }; }, []);useModal每次调用modal.confirm(...)时都会构造一个HookModal元素并调用holderRef.current?.patchElement(modal)将其注入contextHolder内部。因为HookModal是在组件树中渲染的所以它能自然而然地继承当前位置的所有 React Context。5.2 HookModal承载配置、更新与销毁每个通过 hooks 创建的弹窗最终渲染为HookModaluseModal/HookModal.tsx它通过useImperativeHandle暴露两个实例方法React.useImperativeHandle(ref, () ({ destroy: close, update: (newConfig: ModalFuncProps) { setInnerConfig((originConfig) ({ ...originConfig, ...newConfig, })); }, }));update合并新配置支持动态更新标题、内容等测试update before render用例验证了在渲染前调用update也能生效最终标题显示为更新后的值destroy调用close设置open为false并触发关闭动画关闭动画结束后执行afterClose。HookModal内部基于ConfirmDialog渲染并自动处理okCancel默认值innerConfig.okCancel ?? innerConfig.type confirm、从ConfigContext读取direction、通过useLocale读取okText/cancelText等本地化文案。5.3 返回实例destroy / update / thenmodal.confirm()返回的实例对象见 useModal/index.tsx包含三个能力方法说明destroy销毁当前弹窗若弹窗尚未渲染通过actionQueue队列延迟执行update更新当前弹窗配置同样支持渲染前的延迟更新then仅 hooksPromise 链式调用支持await操作源码中destroy与update都处理了调用时机早于渲染完成的边缘情况如果modalRef.current尚不存在就把操作推入actionQueue待useEffect触发时统一执行React.useEffect(() { if (actionQueue.length) { const cloneQueue [...actionQueue]; cloneQueue.forEach((action) { action(); }); setActionQueue([]); } }, [actionQueue]);5.4 与静态方法共用的 destroyFns 与 destroyAll无论静态方法还是 hooks 方法关闭函数都会被推入destroyFnscomponents/modal/destroyFns.tsconst destroyFns: Array() void [];静态方法的close在 confirm.tsx 中销毁时会从destroyFns中移除自身hooks 方法在closeFunc holderRef.current?.patchElement(modal)之后也会destroyFns.push(closeFunc)。Modal.destroyAll()见 components/modal/index.tsx则遍历弹出所有关闭函数Modal.destroyAll function destroyAllFn() { while (destroyFns.length) { const close destroyFns.pop(); if (close) { close(); } } };hook.test.tsx的destroyAll works with contextHolder用例验证了通过 hooks 连续弹出info、success、warning、error四种弹窗后调用Modal.destroyAll()可将它们全部关闭。六、hooks 方法与静态方法对比维度静态方法Modal.confirm等hooks 方法modal.confirm等创建方式动态ReactDOM.render到独立容器confirm.tsx在组件树内通过ElementsHolder渲染useModal/index.tsxContext 读取无法读取业务 Context可读取contextHolder所在位置的 ContextPromise await不支持支持返回对象含then使用前提无需挂载任何节点必须把contextHolder插入子节点典型场景不依赖上下文的简单提示需要ConfigProvider配置、本地化或业务 Context 的弹窗七、使用注意事项contextHolder必须挂载如果你不需要 Context 连接直接用静态方法即可无需使用 hooks挂载位置决定 Context 边界把contextHolder放在目标Provider内部且放在所有需要访问的 Provider 之内若存在多个 Provider注意contextHolder与各 Provider 的嵌套先后关系onCancel回调参数HookModal的close逻辑会解析参数中的triggerCancel命中时调用innerConfig.onCancel?.(() {}, ...args.slice(1))。hook.test.tsx的the callback close should be a method when onCancel has a close parameter用例表明当onCancel声明close参数时需要显式调用close()才会真正关闭弹窗点击取消按钮默认不会自动关闭简化 contextHolder 植入若项目中多处使用useModal、useMessage、useNotification可使用 App 包裹组件App统一管理这些 hooks 的contextHolder避免手动植入的繁琐静态方法弹窗内容不更新的 FAQModal 在关闭时会使用 memo 避免内容跳动若在 Modal 中使用 Form需要在effect中调用resetFields重置initialValues。八、结语Modal.useModal是 Ant Design 中既要命令式调用、又要 Context 感知场景下的标准答案。理解其背后contextHolder的挂载规则、usePatchElement的元素注入机制以及 Promiseawait的silent静默约定能帮助你在实际项目中写出更健壮的弹窗交互逻辑。相关演示与测试源码均可在此仓库中继续深入研读demo/hooks.tsx、useModal/index.tsx、useModal/HookModal.tsx、components/modal/tests/hook.test.tsx。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考