InPortal

Portal 提供了一種將子元件渲染到存在於父元件以外的 DOM 中的方法。

Code

JSX
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

export default function InPortal({ children }) {
  const [hostElement, setHostElement] = useState(null);

  useEffect(() => {
    const elm = document.createElement('div');
    setHostElement(elm);

    document.body.appendChild(elm);

    return () => {
      document.body.removeChild(elm);
    };
  }, []);

  if (!hostElement) {
    return null;
  }

  return createPortal(children, hostElement);
}

Usage

JSX
export default function App() {
  return (
    <InPortal>
      <div>// some element //</div>
    </InPortal>
  );
}

Last Updated:May 27, 2022