React传送门-createPortal来看如下代码：第二个p不会渲染在div中，会渲染在body中：这就是cre

来看如下代码：

import { createPortal } from 'react-dom';

export default function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>这个子节点被放置在父节点 div 中。</p>
      {createPortal(
        <p>这个子节点被放置在 document body 中。</p>,
        document.body
      )}
    </div>
  );
}

第二个p不会渲染在div中，会渲染在body中：

<body>  
    <div id="root">  
        <div style="border: 2px solid black">  
            <p>这个子节点被放置在父节点 div 中。</p>  
        </div>  
    </div>  
    <p>这个子节点被放置在 document body 中。</p>  
</body>

这就是createPortal的作用

createPortal(children, domNode, key?)是React 16.0新增的方法，允许你将 children 渲染至 DOM 的不同部分（domNode）下

调用createPortal会创建类似于<portal>的节点，然后将children放到<portal>中

<portal> 只改变 DOM 节点的所处位置。在其他方面，<portal>还是原来的React组件的子节点，行为表现上与子节点一致，比如：<portal>可以访问原来的React父组件内部的数据、事件将从<portal>依循 React 树冒泡到祖先节点

参数：

children：React 可以渲染的任何内容，如 JSX 片段（<div /> 或 <SomeComponent /> 等等）、Fragment（<>...</>）、字符串或数字，以及这些内容构成的数组
domNode：某个已经存在的 DOM 节点，例如由 document.getElementById() 返回的节点
key：可选参数，用作 <portal> 的key

返回值：

返回一个可以包含在 JSX 中的 React 节点，比如<CreatePortal>。如果 React 在渲染输出中遇见它，它将把提供的 children 放入提供的 domNode 中