使用ReactDOM.createPortal()挂载到document.body是否安全？

其实用ReactDOM.createPortal()挂载到document.body本身是React官方认可的用法——像模态框、全局悬浮提示这类需要脱离当前组件树布局的场景，确实经常用到它。但这不代表完全没有坑，和直接用ReactDOM.render()挂载到body的问题有重叠，但也有一些portal特有的需要注意的点：

容易踩的坑 #

• 样式冲突风险：body是全局容器，页面里的全局重置样式、第三方库样式都可能影响你的portal组件。比如body如果设置了overflow: hidden，可能会导致模态框的滚动失效；反过来，你的组件如果不小心用了全局选择器（比如直接写.modal而不是scoped样式），也会污染整个页面的其他元素。
• 事件冒泡的意外触发：Portal的事件是按照React组件树冒泡的，而非DOM树结构。举个例子：你的Modal组件是某个列表组件的子元素，但通过portal挂载到了body，此时点击Modal的关闭按钮，触发的事件依然会冒泡到列表组件的点击事件处理函数里，很容易引发意料之外的逻辑。
• DOM结构混乱与SSR问题：如果多个portal组件都直接挂载到body，body下的DOM节点会变得杂乱，调试起来很麻烦；另外在服务端渲染(SSR)场景下，直接挂载到body会导致客户端hydration不匹配——因为服务端渲染的内容都在根容器里，而portal内容在body里，React会抛出hydration错误。
• z-index层级失控：body下的其他元素如果动态设置了很高的z-index，可能会覆盖你的portal组件。比如页面里的广告弹窗、其他全局组件，你得额外处理层级关系，远不如用独立容器好控制。

更稳妥的最佳实践 #

其实我更建议你不要直接挂载到document.body，而是在body下创建一个独立的空div容器来专门承载portal内容：

方式1：提前在HTML中定义容器 #

<!-- index.html -->
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// Modal组件
import React from 'react';
import ReactDOM from 'react-dom';

export default class Modal extends React.Component {
  render() {
    const portalRoot = document.getElementById('portal-root');
    return ReactDOM.createPortal(
      <div className="modal">{this.props.children}</div>,
      portalRoot
    );
  }
}

方式2：组件内动态创建容器 #

import React from 'react';
import ReactDOM from 'react-dom';

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.portalRoot = null;
  }

  componentDidMount() {
    this.portalRoot = document.createElement('div');
    document.body.appendChild(this.portalRoot);
  }

  componentWillUnmount() {
    document.body.removeChild(this.portalRoot);
  }

  render() {
    return this.portalRoot ? ReactDOM.createPortal(
      <div className="modal">{this.props.children}</div>,
      this.portalRoot
    ) : null;
  }
}

这种做法的好处很明显：

• 完全隔离你的portal组件和body下的其他元素，样式、DOM结构都不会互相干扰
• 更容易控制组件的层级，比如给这个容器设置固定的z-index范围，不用担心被其他元素覆盖
• SSR场景下也能更好地处理hydration，避免不匹配的问题

如果一定要挂载到body怎么办？ #

如果因为某些原因必须直接挂载到body，那记得做好这几点：

1. 用CSS Modules、styled-components这类支持scoped样式的方案，避免样式污染
2. 在portal组件的事件处理函数里，按需用e.stopPropagation()阻止不必要的事件冒泡
3. SSR时不要在服务端渲染portal内容，只在客户端进行渲染（可以用typeof window !== 'undefined'判断环境）
4. 给你的组件加上足够高且唯一的z-index，避免被其他元素覆盖

内容的提问来源于stack exchange，提问作者Daniel