ReactDOM.createPortal

最新推荐文章于 2023-10-27 16:20:42 发布

WeRaceAsOne

最新推荐文章于 2023-10-27 16:20:42 发布

阅读量911

点赞数

分类专栏：前端JS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zhamaoshu4539/article/details/128111518

版权

前端JS 专栏收录该内容

24 篇文章

订阅专栏

React DOM的createPortal功能允许将组件渲染到DOM中任意位置，尤其适用于需要脱离文档流的元素，如模态框、通知、警告和返回顶部按钮等。通过将子节点插入到指定的DOM节点（如.myDiv），可以实现这些组件的定位和展示。在示例中，点击按钮会将'Demo'文本渲染到类名为'myDiv'的元素内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
  );
};