如何使用react刪除組件卸載上的div？

Question

我想使用 react 在組件卸載時刪除 div 元素。

我在 usecallback 方法中創建了一個帶有 id 門戶的 div。 我想在組件卸載時將其刪除，我該怎么做。

下面是我的代碼，

function Dialog () {
    const [portal, setPortal] = React.useState<HTMLDivElement | null>(
        (document.getElementById('portal') as HTMLDivElement) || null
    );
    const createPortalIfNotExists = React.useCallback(() => {
        if (portal === null) {
            const el = document.createElement('div');
            el.id = 'portal';
            document.body.appendChild(el);
            setPortal(document.getElementById(
               'portal'
            ) as HTMLDivElement);
        }
    }, [portal]);

    createPortalIfNotExists();

    if (portal === null) {
        return null;
    }

    return ReactDOM.createPortal(
        <>
            <div>
                {children}
            </div>
       </>,
       portal
   );

}

我在這里有兩個問題，在這種情況下可以用 useEffect 代替 usecallback 。 以及如何在組件卸載時刪除帶有 id 門戶的 div。

有人可以幫我解決這個問題嗎？

Answer 1

通過使用 React.useEffect 內部返回方法，你可以做到。 例如：

function Dialog () {
    const [portal, setPortal] = React.useState<HTMLDivElement | null>(
        (document.getElementById('portal') as HTMLDivElement) || null
    );
    const createPortalIfNotExists = React.useCallback(() => {
        if (portal === null) {
            const el = document.createElement('div');
            el.id = 'portal';
            document.body.appendChild(el);
            setPortal(document.getElementById(
               'portal'
            ) as HTMLDivElement);
        }
    }, [portal]);

    React.useEffect(() => {
      createPortalIfNotExists();

      return () => {
         const portalElement = portal || document.getElementById('portal')
         portal.remove();
      }
    }, [])

    if (portal === null) {
        
        return null;
    }

    return ReactDOM.createPortal(
        <>
            <div>
                {children}
            </div>
       </>,
       portal
   );
``