reactjs - 当我需要将引用传递给另一个组件时，如何确保加载它？

Question

我有一个组件，它基本上呈现如下：

<div ref={containerRef}>
  <Child containerRef={containerRef} />
</div>

我这样做是因为Child' 的渲染逻辑取决于包含 div 的“边界客户端矩形”——子级使用父级的左/上位置来使用 JavaScript 计算自己的绝对位置。通过传入containerRefto Child，我可以访问containerRef.current.getBoundingClientRect()它的各种位置属性。

问题是在初始渲染时，containerRef没有设置。直到第二次渲染才设置。

我该如何 A.) 强制第二次渲染，B.) 强制将其设置在第一次渲染上（可能是不可能的），C.) 以不同的方式解决这个问题，以便孩子可以访问其父母的容器？

也许如果Child在它自己的子 HTML 上设置一个 ref，我可以简单地使用命令式代码来访问该节点的父节点？

Answer 1

Intersection Observer API怎么样？关键是你想观察节点的位置，不是吗？这实现了它并赋予孩子作为状态的地位。

Answer 2

问题是在初始渲染时，未设置 containerRef。

这是一个useLayoutEffect在 DOM 更新后，但在浏览器绘制之前立即运行的用例。

请参阅useEffect 与 useLayoutEffect。

useLayoutEffect(() => {
  // use containerRef.current
}, [])

也许如果 Child 在它自己的子 HTML 上设置一个 ref，我可以简单地使用命令式代码来访问该节点的父节点？

这是 的一个用例useImperativeHandle，但我相信useLayoutEffect就足够了（您没有提供可重现的示例）。

Answer 3

如此处所述，使用回调 ref withuseState解决了这个问题（useRef与没有回调语法相反）。

这样，当设置 ref 时，就会触发渲染。这解决了这个问题。