mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-08 01:53:34 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity
gh-pages
ant-design/e5b49d21-async.e0d75471.js
afc163 903c631b33 deploy: d11f02db92
2025-05-31 08:49:44 +00:00

1 line
13 KiB
JavaScript
Raw Permalink Blame History

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["e5b49d21"],{"8fd47ae4":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("1a4d468e");let n=[{value:"\u6700\u8FD1\u6211\u4EEC\u9047\u5230\u4E86\u4E00\u4E2A ",paraId:0},{value:"issue",paraId:0},{value:"\uFF0C\u8BF4\u662F ",paraId:0},{value:"Modal.useModal",paraId:0},{value:" \u7684 ",paraId:0},{value:"contextHolder",paraId:0},{value:" \u5728\u653E\u7F6E\u4E0D\u540C\u7684\u4F4D\u7F6E\u65F6\uFF0C",paraId:0},{value:"modal.confirm",paraId:0},{value:" \u5F39\u51FA\u4F4D\u7F6E\u4F1A\u4E0D\u4E00\u6837\uFF1A",paraId:0},{value:"import React from 'react';\nimport { Button, Modal } from 'antd';\n\nexport default () => {\n const [modal, contextHolder] = Modal.useModal();\n\n return (\n <div>\n <Modal open>\n <Button\n onClick={() => {\n modal.confirm({ title: 'Hello World' });\n }}\n >\n Confirm\n </Button>\n\n {/* \u{1F6A8} BUG when put here */}\n {contextHolder}\n </Modal>\n\n {/* \u2705 Work as expect when put here */}\n {/* {contextHolder} */}\n </div>\n );\n};\n",paraId:1},{value:"\u6B63\u5E38\u7248\u672C\uFF1A",paraId:2},{value:"\u6709\u95EE\u9898\u7248\u672C\uFF1A",paraId:3},{value:"\u4ECE\u4E0A\u56FE\u53EF\u4EE5\u770B\u5230\u5F53 ",paraId:4},{value:"contextHolder",paraId:4},{value:" \u653E\u5728 ",paraId:4},{value:"Modal",paraId:4},{value:" \u5185\u90E8\u65F6\uFF0Chooks \u8C03\u7528\u7684\u5F39\u51FA\u4F4D\u7F6E\u4E0D\u6B63\u786E\u4E86\u3002",paraId:4},{value:"antd \u7684 Modal \u5E95\u5C42\u8C03\u7528\u7684\u662F ",paraId:5,tocIndex:0},{value:"rc-dialog",paraId:5,tocIndex:0},{value:" \u7EC4\u4EF6\u5E93\uFF0C\u5176\u63A5\u53D7\u4E00\u4E2A ",paraId:5,tocIndex:0},{value:"mousePosition",paraId:5,tocIndex:0},{value:" \u5C5E\u6027\uFF0C\u7528\u4E8E\u63A7\u5236\u5F39\u51FA\u4F4D\u7F6E\uFF08",paraId:5,tocIndex:0},{value:"Dialog/Content/index.tsx",paraId:5,tocIndex:0},{value:"\uFF09\uFF1A",paraId:5,tocIndex:0},{value:"// pseudocode\nconst elementOffset = offset(dialogElement);\nconst transformOrigin = `${mousePosition.x - elementOffset.left}px ${\n mousePosition.y - elementOffset.top\n}px`;\n",paraId:6,tocIndex:0},{value:"\u5176\u4E2D ",paraId:7,tocIndex:0},{value:"offset",paraId:7,tocIndex:0},{value:" \u65B9\u6CD5\u7528\u4E8E\u83B7\u53D6\u7A97\u4F53\u672C\u8EAB\u7684\u5750\u6807\u4F4D\u7F6E(",paraId:7,tocIndex:0},{value:"util.ts",paraId:7,tocIndex:0},{value:")\uFF1A",paraId:7,tocIndex:0},{value:"// pseudocode\nfunction offset(el: Element) {\n const { left, top } = el.getBoundingClientRect();\n return { left, top };\n}\n",paraId:8,tocIndex:0},{value:"\u901A\u8FC7\u65AD\u70B9\u8C03\u8BD5\uFF0C\u6211\u4EEC\u53EF\u4EE5\u53D1\u73B0 ",paraId:9,tocIndex:0},{value:"mousePosition",paraId:9,tocIndex:0},{value:" \u7684\u503C\u662F\u6B63\u786E\u7684\uFF0C\u4F46\u662F ",paraId:9,tocIndex:0},{value:"offset",paraId:9,tocIndex:0},{value:" \u4E2D\u83B7\u53D6\u7684 ",paraId:9,tocIndex:0},{value:"rect",paraId:9,tocIndex:0},{value:" \u7684\u503C\u662F\u9519\u8BEF\u7684\uFF1A",paraId:9,tocIndex:0},{value:'{\n "left": 0,\n "top": 0,\n "width": 0,\n "height": 0\n}\n',paraId:10,tocIndex:0},{value:"\u8FD9\u4E2A\u503C\u5F88\u660E\u663E\u4EE3\u8868\u7A97\u4F53\u7EC4\u4EF6\u5728\u52A8\u753B\u542F\u52A8\u8282\u70B9\u5C1A\u672A\u6DFB\u52A0\u5230 DOM \u6811\u4E2D\uFF0C\u6240\u4EE5\u6211\u4EEC\u9700\u8981\u67E5\u770B\u4E00\u4E0B Dialog \u6DFB\u52A0\u7684\u903B\u8F91\u3002",paraId:11,tocIndex:0},{value:"rc-dialog",paraId:12,tocIndex:1},{value:" \u901A\u8FC7 ",paraId:12,tocIndex:1},{value:"rc-portal",paraId:12,tocIndex:1},{value:" \u5728 document \u4E2D\u521B\u5EFA\u4E00\u4E2A\u8282\u70B9\uFF0C\u7136\u540E\u901A\u8FC7 ",paraId:12,tocIndex:1},{value:"ReactDOM.createPortal",paraId:12,tocIndex:1},{value:" \u5C06\u7EC4\u4EF6\u6E32\u67D3\u5230\u8FD9\u4E2A\u8282\u70B9\u4E0A\u3002\u5BF9\u4E8E ",paraId:12,tocIndex:1},{value:"contextHolder",paraId:12,tocIndex:1},{value:" \u4F4D\u7F6E\u4E0D\u540C\u800C\u51FA\u73B0\u8868\u73B0\u4E0D\u540C\u53EF\u4EE5\u63A8\u6D4B\uFF0C\u4E00\u5B9A\u662F\u5728 document \u521B\u5EFA\u8282\u70B9\u7684\u65F6\u5E8F\u51FA\u73B0\u4E86\u95EE\u9898\uFF0C\u4E8E\u662F\u6211\u4EEC\u53EF\u4EE5\u8FDB\u4E00\u6B65\u770B\u4E00\u4E0B ",paraId:12,tocIndex:1},{value:"rc-portal",paraId:12,tocIndex:1},{value:" \u4E2D\u9ED8\u8BA4\u6DFB\u52A0\u8282\u70B9\u7684\u90E8\u5206(",paraId:12,tocIndex:1},{value:"useDom.tsx",paraId:12,tocIndex:1},{value:")\uFF1A",paraId:12,tocIndex:1},{value:"// pseudocode\nfunction append() {\n // This is not real world code, just for explain\n document.body.appendChild(document.createElement('div'));\n}\n\nuseLayoutEffect(() => {\n if (queueCreate) {\n queueCreate(append);\n } else {\n append();\n }\n}, []);\n",paraId:13,tocIndex:1},{value:"\u5176\u4E2D ",paraId:14,tocIndex:1},{value:"queueCreate",paraId:14,tocIndex:1},{value:" \u662F\u901A\u8FC7 ",paraId:14,tocIndex:1},{value:"context",paraId:14,tocIndex:1},{value:" \u83B7\u53D6\uFF0C\u76EE\u7684\u662F\u4E3A\u4E86\u9632\u6B62\u5728\u5D4C\u5957\u5C42\u7EA7\u4E0B\uFF0C\u5B50\u5143\u7D20\u521B\u5EFA\u5148\u4E8E\u7236\u5143\u7D20\u7684\u60C5\u51B5\uFF1A",paraId:14,tocIndex:1},{value:'<Modal title="Hello 1" open>\n <Modal title="Hello 2" open>\n <Modal>\n<Modal>\n',paraId:15,tocIndex:1},{value:'<!-- Child `useLayoutEffect` is run before parent. Which makes inject DOM before parent -->\n<div data-title="Hello 2"></div>\n<div data-title="Hello 1"></div>\n',paraId:16,tocIndex:1},{value:"\u901A\u8FC7 ",paraId:17,tocIndex:1},{value:"queueCreate",paraId:17,tocIndex:1},{value:" \u5C06\u5B50\u5143\u7D20\u7684 ",paraId:17,tocIndex:1},{value:"append",paraId:17,tocIndex:1},{value:" \u52A0\u5165\u961F\u5217\uFF0C\u7136\u540E\u518D\u901A\u8FC7 ",paraId:17,tocIndex:1},{value:"useLayoutEffect",paraId:17,tocIndex:1},{value:" \u6267\u884C\uFF1A",paraId:17,tocIndex:1},{value:"// pseudocode\nconst [queue, setQueue] = useState<VoidFunction[]>([]);\n\nfunction queueCreate(appendFn: VoidFunction) {\n setQueue((origin) => {\n const newQueue = [appendFn, ...origin];\n return newQueue;\n });\n}\n\nuseLayoutEffect(() => {\n if (queue.length) {\n queue.forEach((appendFn) => appendFn());\n setQueue([]);\n }\n}, [queue]);\n",paraId:18,tocIndex:1},{value:"\u7531\u4E8E\u4E0A\u8FF0\u7684\u961F\u5217\u64CD\u4F5C\uFF0C\u4F7F\u5F97 portal \u7684 DOM \u5728\u5D4C\u5957\u4E0B\u4F1A\u5728\u4E0B\u4E00\u4E2A ",paraId:19,tocIndex:2},{value:"useLayoutEffect",paraId:19,tocIndex:2},{value:" \u89E6\u53D1\u3002\u8FD9\u5BFC\u81F4\u6DFB\u52A0\u8282\u70B9\u884C\u4E3A\u540E\u4E8E ",paraId:19,tocIndex:2},{value:"rc-dialog",paraId:19,tocIndex:2},{value:" \u542F\u52A8\u52A8\u753B\u7684 ",paraId:19,tocIndex:2},{value:"useLayoutEffect",paraId:19,tocIndex:2},{value:" \u65F6\u673A\uFF0C\u5BFC\u81F4\u5143\u7D20\u4E0D\u5728 document \u4E2D\u800C\u65E0\u6CD5\u83B7\u53D6\u6B63\u786E\u7684\u5750\u6807\u4FE1\u606F\u3002",paraId:19,tocIndex:2},{value:"\u7531\u4E8E Modal \u5DF2\u7ECF\u662F\u5F00\u542F\u72B6\u6001\uFF0C\u5176\u5B9E\u4E0D\u9700\u8981\u901A\u8FC7 ",paraId:20,tocIndex:2},{value:"queue",paraId:20,tocIndex:2},{value:" \u5F02\u6B65\u6267\u884C\uFF0C\u6240\u4EE5\u6211\u4EEC\u53EA\u9700\u8981\u52A0\u4E00\u4E2A\u5224\u65AD\u5982\u679C\u662F\u5F00\u542F\u72B6\u6001\uFF0C\u76F4\u63A5\u6267\u884C ",paraId:20,tocIndex:2},{value:"append",paraId:20,tocIndex:2},{value:" \u5373\u53EF\uFF1A",paraId:20,tocIndex:2},{value:"// pseudocode\nconst appendedRef = useRef(false);\n\nconst queueCreate = !appendedRef.current\n ? (appendFn: VoidFunction) => {\n // same code\n }\n : undefined;\n\nfunction append() {\n // This is not real world code, just for explain\n document.body.appendChild(document.createElement('div'));\n appendedRef.current = true;\n}\n\n// ...\n\nreturn <PortalContext value={queueCreate}>{children}</PortalContext>;\n",paraId:21,tocIndex:2},{value:"\u4EE5\u4E0A\u3002",paraId:22,tocIndex:2}];},e5b49d21:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return x;}});var n=t("777fffbe"),d=t("f19d2b93"),l=n._(t("b622e337")),u=n._(t("97c488ea")),o=n._(t("c96b0d01")),s=t("5b220c3d"),c=t("9c86e52a"),r=t("8fd47ae4"),x=function(){return(0,d.jsx)(c.DumiPage,{children:(0,d.jsx)(s.Suspense,{fallback:(0,d.jsx)(o.default,{}),children:(0,d.jsx)(d.Fragment,{children:(0,d.jsxs)("div",{className:"markdown",children:[(0,d.jsxs)("p",{children:[r.texts[0].value,(0,d.jsx)(u.default,{href:"https://github.com/ant-design/ant-design/issues/39427",sourceType:"a",children:r.texts[1].value}),r.texts[2].value,(0,d.jsx)("code",{children:r.texts[3].value}),r.texts[4].value,(0,d.jsx)("code",{children:r.texts[5].value}),r.texts[6].value,(0,d.jsx)("code",{children:r.texts[7].value}),r.texts[8].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[9].value}),(0,d.jsx)("p",{children:r.texts[10].value}),(0,d.jsx)("p",{children:(0,d.jsx)("img",{src:"https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VJJUTL88uM4AAAAAAAAAAAAADrJ8AQ/original",alt:"Normal"})}),(0,d.jsx)("p",{children:r.texts[11].value}),(0,d.jsx)("p",{children:(0,d.jsx)("img",{src:"https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a_ulS7EaylkAAAAAAAAAAAAADrJ8AQ/original",alt:"BUG"})}),(0,d.jsxs)("p",{children:[r.texts[12].value,(0,d.jsx)("code",{children:r.texts[13].value}),r.texts[14].value,(0,d.jsx)("code",{children:r.texts[15].value}),r.texts[16].value]}),(0,d.jsxs)("h3",{id:"\u601D\u8DEF\u6574\u7406",children:[(0,d.jsx)(u.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u601D\u8DEF\u6574\u7406",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"\u601D\u8DEF\u6574\u7406"]}),(0,d.jsxs)("p",{children:[r.texts[17].value,(0,d.jsx)("code",{children:r.texts[18].value}),r.texts[19].value,(0,d.jsx)("code",{children:r.texts[20].value}),r.texts[21].value,(0,d.jsx)(u.default,{href:"https://github.com/react-component/dialog/blob/79649e187ee512be6b3eb3b76e4a6b618b67ebc7/src/Dialog/Content/index.tsx#L43",sourceType:"a",children:r.texts[22].value}),r.texts[23].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[24].value}),(0,d.jsxs)("p",{children:[r.texts[25].value,(0,d.jsx)("code",{children:r.texts[26].value}),r.texts[27].value,(0,d.jsx)(u.default,{href:"https://github.com/react-component/dialog/blob/79649e187ee512be6b3eb3b76e4a6b618b67ebc7/src/util.ts#L28",sourceType:"a",children:r.texts[28].value}),r.texts[29].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[30].value}),(0,d.jsxs)("p",{children:[r.texts[31].value,(0,d.jsx)("code",{children:r.texts[32].value}),r.texts[33].value,(0,d.jsx)("code",{children:r.texts[34].value}),r.texts[35].value,(0,d.jsx)("code",{children:r.texts[36].value}),r.texts[37].value]}),(0,d.jsx)(l.default,{lang:"json",children:r.texts[38].value}),(0,d.jsx)("p",{children:r.texts[39].value}),(0,d.jsxs)("h3",{id:"createportal",children:[(0,d.jsx)(u.default,{"aria-hidden":"true",tabIndex:"-1",href:"#createportal",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"createPortal"]}),(0,d.jsxs)("p",{children:[(0,d.jsx)("code",{children:r.texts[40].value}),r.texts[41].value,(0,d.jsx)("code",{children:r.texts[42].value}),r.texts[43].value,(0,d.jsx)("code",{children:r.texts[44].value}),r.texts[45].value,(0,d.jsx)("code",{children:r.texts[46].value}),r.texts[47].value,(0,d.jsx)("code",{children:r.texts[48].value}),r.texts[49].value,(0,d.jsx)(u.default,{href:"https://github.com/react-component/portal/blob/85e6e15ee97c70ec260c5409d9d273d6967e3560/src/useDom.tsx#L55",sourceType:"a",children:r.texts[50].value}),r.texts[51].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[52].value}),(0,d.jsxs)("p",{children:[r.texts[53].value,(0,d.jsx)("code",{children:r.texts[54].value}),r.texts[55].value,(0,d.jsx)("code",{children:r.texts[56].value}),r.texts[57].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[58].value}),(0,d.jsx)(l.default,{lang:"html",children:r.texts[59].value}),(0,d.jsxs)("p",{children:[r.texts[60].value,(0,d.jsx)("code",{children:r.texts[61].value}),r.texts[62].value,(0,d.jsx)("code",{children:r.texts[63].value}),r.texts[64].value,(0,d.jsx)("code",{children:r.texts[65].value}),r.texts[66].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[67].value}),(0,d.jsxs)("h3",{id:"\u95EE\u9898\u5206\u6790",children:[(0,d.jsx)(u.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u95EE\u9898\u5206\u6790",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"\u95EE\u9898\u5206\u6790"]}),(0,d.jsxs)("p",{children:[r.texts[68].value,(0,d.jsx)("code",{children:r.texts[69].value}),r.texts[70].value,(0,d.jsx)("code",{children:r.texts[71].value}),r.texts[72].value,(0,d.jsx)("code",{children:r.texts[73].value}),r.texts[74].value]}),(0,d.jsxs)("p",{children:[r.texts[75].value,(0,d.jsx)("code",{children:r.texts[76].value}),r.texts[77].value,(0,d.jsx)("code",{children:r.texts[78].value}),r.texts[79].value]}),(0,d.jsx)(l.default,{lang:"tsx",children:r.texts[80].value}),(0,d.jsx)("p",{children:r.texts[81].value})]})})})});};}}]);
Reference in New Issue View Git Blame Copy Permalink