javascript - 将 ReactDOM.createPortal() 与 document.body 一起使用是否安全？

Question

我明白 it's probably a bad idea至 ReactDOM.render()进入 document.body。但是使用 ReactDOM.createPortal() 有什么问题吗？用 document.body?

尝试寻找当您渲染到主体中时 React 变得疯狂的示例，以便我可以使用 createPortal 对其进行测试，但我找不到任何示例。

为了把事情放在上下文中，这是我正在谈论的示例用法:

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

export default class Modal extends React.Component {
    render() {
        return ReactDOM.createPortal(
            <div className='modalContainer'>
                <div className='modalBox'>
                    {this.props.children}
                </div>
            </div>,
            document.body
        );
    }
}

此模式没有遇到任何问题，但我想知道在我开始添加更多库时是否会产生任何后果。

Answer 1

我很确定相同的规则适用于门户网站，就像ReactDOM.render 的使用一样。根据portals documentation你提供的，从 React 的 Angular 来看，门户确实是 React 应用程序的子级(考虑例如合成 DOM 事件传播的方向)，但实际上门户位于单独的上下文中，React 仍然需要保持跟踪状态变化并与 DOM 同步。

如果此类上下文的父元素是 body 元素，那么相同数量的意外惊喜 就像通过第 3 方工具插入元素一样处于危险之中，如所述在 Dan Abramov's article .简而言之:由于来自第 3 方的那些 DOM 突变发生在 React 的控制之外，但修改了受 React 控制的 DOM 部分，这可能导致冲突和不一致。

@RIYAJ KHAN 在他的评论中提出的另一点是如果门户突然成为应用程序的父级会发生什么，特别是如果 React 以相反的方式看待它们？我至少能想到的是 native 和 synthetic DOM 事件传播之间的不一致，这两者会在应用程序和门户容器之间以相反的方向传播事件，这可能会令人难以置信如果您经常使用这两种类型的事件处理(例如，React 组件的事件处理程序中的合成和 RxJS 运算符中的 native )。

最后但同样重要的是，如果您有更多这样的门户，它们应该位于顶级 DOM 级别，您是否要为所有这些重用 body？这与上述两点一起会造成困惑。

最安全的方法是在 body 下为门户创建专用的 div，这样它们就可以保持干净并且没有不需要的魔法。