Modal hook 的有趣 BUG

import React from 'react';

import { Button, Modal } from 'antd';

export default () => {

const [modal, contextHolder] = Modal.useModal();

return (

<div>

<Button

onClick={() => {

modal.confirm({ title: 'Hello World' });

}}

Confirm

</Button>

{/* 🚨 BUG when put here */}

{contextHolder}

</Modal>

{/* ✅ Work as expect when put here */}

{/* {contextHolder} */}

</div>

);

};

// pseudocode

function append() {

// This is not real world code, just for explain

document.body.appendChild(document.createElement('div'));

}

useLayoutEffect(() => {

if (queueCreate) {

queueCreate(append);

} else {

append();

}

}, []);

// pseudocode

const [queue, setQueue] = useState<VoidFunction[]>([]);

function queueCreate(appendFn: VoidFunction) {

setQueue((origin) => {

const newQueue = [appendFn, ...origin];

return newQueue;

});

}

useLayoutEffect(() => {

if (queue.length) {

queue.forEach((appendFn) => appendFn());

setQueue([]);

}

}, [queue]);

// pseudocode

const appendedRef = useRef(false);

const queueCreate = !appendedRef.current

? (appendFn: VoidFunction) => {

// same code

}

: undefined;

function append() {

// This is not real world code, just for explain

document.body.appendChild(document.createElement('div'));

appendedRef.current = true;

}

// ...

return <PortalContext value={queueCreate}>{children}</PortalContext>;

import React from 'react';

import { Button, Modal } from 'antd';

export default () => {

const [modal, contextHolder] = Modal.useModal();

return (

<div>

<Button

onClick={() => {

modal.confirm({ title: 'Hello World' });

}}

Confirm

</Button>

{/* 🚨 BUG when put here */}

{contextHolder}

</Modal>

{/* ✅ Work as expect when put here */}

{/* {contextHolder} */}

</div>

);

};

// pseudocode

function append() {

// This is not real world code, just for explain

document.body.appendChild(document.createElement('div'));

}

useLayoutEffect(() => {

if (queueCreate) {

queueCreate(append);

} else {

append();

}

}, []);

// pseudocode

const [queue, setQueue] = useState<VoidFunction[]>([]);

function queueCreate(appendFn: VoidFunction) {

setQueue((origin) => {

const newQueue = [appendFn, ...origin];

return newQueue;

});

}

useLayoutEffect(() => {

if (queue.length) {

queue.forEach((appendFn) => appendFn());

setQueue([]);

}

}, [queue]);

// pseudocode

const appendedRef = useRef(false);

const queueCreate = !appendedRef.current

? (appendFn: VoidFunction) => {

// same code

}

: undefined;

function append() {

// This is not real world code, just for explain

document.body.appendChild(document.createElement('div'));

appendedRef.current = true;

}

// ...

return <PortalContext value={queueCreate}>{children}</PortalContext>;

Ant Design

Modal hook 的有趣 BUG

Ant Design

Modal hook 的有趣 BUG

思路整理

createPortal

问题分析

思路整理

createPortal

问题分析