获取React应用程序的根DOM节点

问题描述 投票：0回答：3

findDOMNode
可用于查找给定组件的 DOM 节点，但我不确定如何遍历树来查找最初传递给 
ReactDOM.render()
的相同节点。

例如

从应用程序内部发现元素

root
，我们有：

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React 是否在内部存储它？

javascript reactjs react-dom
3个回答
1
投票

从技术上讲，可能有多个 React 应用程序在同一页面上运行（不同版本/微前端），因此，我不知道为什么从其中一个特定的容器中知道哪个容器属于它，但有一种查找根容器的方法，假设它是

<body>
元素的直接子节点：

const root = [...document.body.children].find(elem => elem._reactRootContainer)
0
投票

似乎在 React 16 和 17+ 中都适用的解决方案：

function getReactRootNode() {

    // root node in React >= 17
    const rootNode = [...document.body.children].find(
            (elem) => elem._reactRootContainer,
    );

    if (!rootNode) {
        // root node in React <= 16
        return document.body;
    }

    return rootNode;
}
-2
投票

您到底为什么要尝试查找具有 

"root"
id 的元素？ 
render
函数的第二个参数是获取该元素，以便您知道。

但真正的问题是你想要 React 组件还是它所绑定的实际 DOM 元素，因为之后的所有内容都是 VDOM（虚拟 DOM）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.