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

Question

我有一个基本上像这样呈现的组件：

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

我这样做是因为 Child 的渲染逻辑依赖于包含 div 的“边界客户端矩形”-- child 使用 parent的 left/top 个位置，以便用 JavaScript 计算自己的绝对位置。通过将 containerRef 传递给 Child，我可以访问 containerRef.current.getBoundingClientRect() 及其各种位置属性。

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

我怎样才能 A.) 强制第二个渲染，B.) 强制在第一个渲染上设置它（大概是不可能的），C.) 以不同的方式解决这个问题，使得 child 可以访问其 parent 的容器吗？

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

Answer 1

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

Answer 2

The problem is that on initial render, containerRef is not set.

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

见useEffect vs useLayoutEffect。

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

Perhaps if Child sets a ref on its own child HTML, I can simply use imperative code to access the parent of that node?

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

Answer 3

与 described here 一样，使用带有 useState 的回调引用解决了这个问题（与 useRef 相反，没有回调语法。）

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

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

How can I ensure that a ref is loaded when I need it to pass to another component?

reactjs

use-ref