首页 > 其他分享 >ReactDOM.createPortal

ReactDOM.createPortal

时间:2023-11-17 15:35:35浏览次数:26  
标签:DOM Demo 组件 createPortal 节点 ReactDOM

ReactDOM.createPortal(child, container)

Portal 将提供一种将子节点渲染到 DOM 节点中的方式,该节点存在于 DOM 组件的层次结构之外。
因此 Portals 适合脱离文档流(out of flow) 的组件,特别是 position: absolute 与 position: fixed的组件。比如模态框,通知,警告,goTop 等

import { createPortal } from 'react-dom';

const Demo = () => {
  const handleClick = () => {
    createPortal(<div>ReactDom.Portal Demo</div>, document.querySelector('.myDiv'));
  };

  return (
    <div>
      <div className="myDiv">Demo</div>
      <button onClick={handleClick}>click</button>
    </div>
  );
};

标签:DOM,Demo,组件,createPortal,节点,ReactDOM
From: https://www.cnblogs.com/ZerlinM/p/17838856.html

相关文章