Javascript 为什么可以'；我不能访问通过React DOM呈现的元素的子元素吗？

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

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

const containerRef=useRef（空）
常量measureElement=（元素：any，layerId=“root”）=>{
const measureLayer=document.createElement（“div”）；
setAttribute（“类”、“度量div”）；
setAttribute（“id”、“度量div”）；
render（元素，度量层）；
containerRef.current？.appendChild（measureLayer）；
const measureDiv=document.getElementById（“度量div”）；
控制台日志（measureDiv，measureDiv.children.item（0））
}
useffect（（）=>{
测量元素(
)
}, [])
返回(
)

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

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

来自React:

---

render（）当前返回对根ReactComponent实例的引用。但是，使用此返回值是传统的，应该避免使用，因为在某些情况下，React的未来版本可能会异步呈现组件。如果需要对根ReactComponent实例的引用，首选的解决方案是将回调引用附加到根元素

---

您可以通过延迟读取root（measureLayer）元素的child来检查它。

“React的未来版本在某些情况下可能会异步呈现组件。I”可能会异步呈现运行。请稍等片刻，然后再试一次。@Robert Yup！情况就是这样。我在create方法调用后设置了2秒的setTimeout，现在就得到了元素。如果这不是评论，我会将其标记为正确答案。谢谢2秒。这是很多时间。如果您在控制台中没有渲染被阻止（chrome）的信息，这意味着渲染时间不到50毫秒。这是一个非常简单的示例，因此realy 50 max 100毫秒的渲染时间非常长。