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

Question

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

例如

从 App 中发现元素 root，我们有：

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

React 是否在内部存储它？

Answer 1

您究竟为什么要尝试查找具有 "root" ID 的元素？ render 函数的第二个参数是让你知道的那个元素。

但真正的问题是你想要 React 组件还是它也被绑定的实际 DOM 元素，因为这之后的一切都是 VDOM（虚拟 DOM） .

Answer 2

从技术上讲，同一页面上可能有多个 React 应用程序运行（ 不同的版本/微前端 ），因此，我不知道其中的原因其中一个特定的容器知道它属于哪个容器，但是有一种方法可以找到根容器，假设它是<body>元素的直接子节点：

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

Get the root DOM node of a React application