将ReactDOM.createPortal()与document.body一起使用是否安全? [英] Is it safe to use ReactDOM.createPortal() with document.body?

问题描述

我了解这可能是个坏主意 ReactDOM.render() 转换为 document.body .但是将 ReactDOM.createPortal() 与 document.body ?

I understand that it's probably a bad idea to ReactDOM.render() into document.body. But are there any issues with using ReactDOM.createPortal() with document.body?

试图在渲染到身体时寻找React疯狂的例子，以便我可以使用createPortal进行测试，但我找不到任何东西.

Tried looking for examples of React going bonkers when you render into body so I could test it out with createPortal but I wasn't able to find any.

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

To put things into context, here's a sample usage I'm speaking about:

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
        );
    }
}

这种模式还没有遇到任何问题，但是我想知道在开始添加更多库时是否会有后果.

Haven't run into any issues with this pattern but I'd like to know if there are consequences as I start adding more libraries.

推荐答案

我非常确定，对于 ReactDOM.render 的使用，相同的规则适用于门户网站.根据您提供的门户文档，该门户确实是从React的角度出发的.查看React应用程序的子级(例如，考虑合成DOM事件传播的方向)，但从物理上讲，门户位于单独的上下文中，在该上下文中，React仍需要跟踪状态变化并与DOM保持同步.

I am pretty sure that the same rules apply to portals as to usage of ReactDOM.render. According to the portals documentation you provided, it is true that the portal is from the React's point of view a child of the React application (consider eg. the direction of the synthetic DOM event propagation), but physically the portal lives in separate context where React still needs to keep track of state changes and be in sync with the DOM.

如果此类上下文的父级是 body 元素，那么与通过第三方工具插入的元素一样，会出现相同数量的意外惊喜在丹·阿布拉莫夫的文章中.简而言之:由于来自第三方的DOM突变发生在React的控制之外，因此BUT修改了IS在React的控制下的DOM部分，这可能导致冲突和不一致.

If the parent of such context is the body element, then the same amount of unwanted surprises is in stake like elements being inserted to it via 3rd party tools as stated in Dan Abramov's article. Simply put: As those DOM mutations from 3rd parties happen outside of React's control BUT modify the part of DOM that IS under React's control, it can lead to conflicts and inconsistencies.

@RIYAJ KHAN在评论中提到的另一点如果门户突然成为应用程序的父级会发生什么?，特别是如果React看到相反的方向时，会发生什么?我至少能想到的是 native 和 synthetic DOM事件传播之间的不一致，在这两种情况下，这两个事件将在应用程序和门户容器之间沿相反的方向传播事件，这可能会让人感到困惑如果您经常使用两种类型的事件处理(例如，React组件的事件处理程序中的 synthetic 和RxJS运算符中的 native ).

Another point @RIYAJ KHAN has risen in his comment is what happens if suddenly the portal becomes parent of the application, especially if React sees them the other way around? The least I can think of are inconsistencies between native and synthetic DOM event propagation, where those two would propagate events in opposite directions between app and portal containers, which can get mind boggling if you often use both types of event handling (eg. synthetic in React component's event handlers and the native ones in RxJS operators).

最后但并非最不重要的一点是，如果您有更多此类门户网站应该位于DOM顶级级别，该怎么办?，您是否要对所有这些门户网站重新使用 body ?再加上以上两点，将会造成动荡.

Last but not least, what if you have more such portals which should be on the top DOM level, are you going to reuse the body for all of them? That together with the 2 points above would create a turmoil.

最安全的方法是在 body 下为门户创建专用的 div ，这样就可以保持门户整洁并且没有有害的魔法.

The safest way is to create dedicated divs under the body just for the portals, this way they stay clean and free of unwanted magic.

这篇关于将ReactDOM.createPortal()与document.body一起使用是否安全?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！