React Portals

前端开发

449

React Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。常见场景：对话框、悬浮卡以及提示框！

定义一个模态框组件：


import React, {
  useRef,
  useEffect,
} from 'react';
import ReactDOM from 'react-dom';

const Modal = () => {
  const elRef = useRef<HTMLDivElement>(document.createElement('div'));

  useEffect(() => {
    document.body.appendChild(elRef.current);
    return () => {
      elRef.current && document.body.removeChild(elRef.current);
    };
  }, []);

  if (!elRef.current) {
    return null;
  }

  return ReactDOM.createPortal(<div>这个是模态框,直接挂载在body下面!!</div>, elRef.current);
};

在另一个组件中使用该模态框组件：


const App: React.FC = memo(() => {
  const [portalVisible, setPortalVisible] = useState(false);

  return (
    <div>
      <button type="button" onClick={() => setPortalVisible(!portalVisible)}>
        测试Portal
      </button>
      {portalVisible && <Modal />}
    </div>
  );
});

baobao86813

有些人，你以为可以见面的。有些事，你以为可以一直继续的。然后，也许在你转身的那个刹那。有些人，你就再也见不到了。当太阳落下，又升起来的时候，一切都变了，一不小心就在也回不去了。

发布数

关注者

4669

累计阅读

React Portals 4年前

热门教程文档