React如何将组件渲染到指定节点—ReactDOM.createPortal

适用场景

在React开发过程中，会遇到弹窗、全局组件等开发的情况，这时候我们可能根据不同的需求需要把组件渲染至指定页面，通过会把组件渲染到body节点下。我们可以使用ReactDOM的createPortal方法完成这一需求。

ReactDOM.createPortal

先来看下react-dom库里面关于createPortal的源码

function createPortal(
  children: ReactNodeList,
  container: Container,
  key: ?string = null,
): React$Portal {
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // TODO: pass ReactDOM portal implementation as third argument
  // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
  return createPortalImpl(children, container, null, key);
}

createPortal函数主要有三个参数，分别是children（需要渲染的组件）、container（需要渲染到的指定节点）、key。开发中我们主要关注children和container即可。

Usage

支持createPortal方法的版本</