为什么我不能访问通过 React DOM 呈现的元素的子元素？

Question

我正在尝试访问我在以下代码段中创建并附加了 ReactDOM.create 的 measureDiv 的子项，我仅在挂载元素时才在挂钩中调用此 function。 问题是元素的子元素是空的，尽管它在屏幕上呈现并且在检查器中可见。 我可以在第二次渲染时访问孩子。

const containerRef = useRef<ReactNode | null>(null)

const measureElement = (element:any, layerId = "root") => {
  const measureLayer = document.createElement("div");
  measureLayer.setAttribute("class", "measure-div");
  measureLayer.setAttribute("id", "measure-div");

  ReactDOM.render(element, measureLayer);

  containerRef.current?.appendChild(measureLayer);

  const measureDiv = document.getElementById("measure-div");

  console.log(measureDiv, measureDiv.children.item(0))
}

useEffect(() => {
  measureElement(
    <BrowserRouter>
      <MuiThemeProvider theme={ManagementTheme}>
        <Element {...{props}/>
      </MuiThemeProvider>
    </BrowserRouter>
  )
}, [])

return (
  <Grid
      container
      className={classes.columnContainer}
      data-automation-id="test-answers-row"
      id="test-answers-row"
      ref={containerRef}
  />
)

我的问题是为什么我不能在渲染后立即通过 ReactDOM.render 访问我在节点中渲染的子节点？ 为什么我在下一次渲染时得到它们？

如果您想知道我试图在渲染到应用程序之前在隐藏的 div 中渲染元素以获取其大小以预测布局。

Answer 1

来自 React文档：

ReactDOM.render() 当前返回对根 ReactComponent 实例的引用。 然而，使用这个返回值是遗留的，应该避免使用，因为未来版本的 React 在某些情况下可能会异步渲染组件。 如果您需要对根 ReactComponent 实例的引用，首选的解决方案是将回调 ref 附加到根元素。

您可以通过延迟读取根 (measureLayer) 元素的子元素来检查它。