Javascript 将ReactDOM.createPortal（）与document.body一起使用是否安全？

我理解将其转换为

document.body

。但是与

document.body一起使用是否存在任何问题

我试着在你们渲染到身体时寻找一些反应疯狂的例子，这样我就可以用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
        );
    }
}

从“React”导入React；
从“react dom”导入react dom；
导出默认类Modal.Component{
render（）{
返回ReactDOM.createPortal(
{this.props.children}
,
文件正文
);
}
}

此模式没有遇到任何问题，但我想知道，当我开始添加更多库时，是否会产生后果。
我非常确定对于
ReactDOM.render的使用，同样的规则适用于门户。根据您提供的，从React的角度来看，门户确实是React应用程序的子应用程序（例如，考虑合成DOM事件传播的方向），但实际上门户生活在单独的上下文中，React仍然需要跟踪状态更改并与DOM同步

如果此类上下文的父元素是
主体
元素，则中所述的通过第三方工具插入的类似于利害关系的元素中也有同样数量的意外事件。简单地说：由于来自第三方的DOM突变发生在React的控制之外，但修改了React控制下的DOM部分，因此可能会导致冲突和不一致

@RIYAJ KHAN在其评论中提出的另一点是，如果门户突然成为应用程序的父应用程序，尤其是如果React从另一个角度看待它们，会发生什么情况？至少我能想到的是本机DOM事件传播和合成DOM事件传播之间的不一致性，这两种方法会在应用程序和门户容器之间以相反的方向传播事件，如果经常同时使用这两种类型的事件处理，这可能会让人难以置信（例如，React组件的事件处理程序中的合成处理程序和RxJS操作符中的本机处理程序）

最后但并非最不重要的一点是，如果您有更多此类门户，它们应该位于顶级DOM级别，那么您是否要为所有这些门户重复使用
主体
？这与上面的两点一起会造成混乱

最安全的方法是在
主体下为门户创建专用的
div
s，这样它们就保持干净，没有不必要的魔法。
到目前为止，我们在Material UI上的经验是它是安全的：。我们还没有看到使用该库的100多万开发人员中的一位报告了任何限制。
应用程序根始终是孩子对于.Body，在Body上呈现门户意味着将整个应用程序作为门户的子应用程序，这是最糟糕的。谢谢你指出这一点@Dan，我经常看到人们使用
createPortal（portal，document.Body）
并且没有注意到这些警告。您能在方便的时候查看一下我的吗？我在将门户安装到
document.body
时遇到了一些意外的事件行为，但无法确定是什么导致了它。