React Portals

原创
2020/12/05 15:10
阅读数 178

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>
  );
});
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部