如何在 React 中使用 DOMRect 和 useEffect？

Question

我正在尝试在 React 中获取元素的 x 和 y。我可以使用 DOMRect 做到这一点，但不是在第一次渲染中。这就是我现在的代码：

const Circle: React.FC<Props> = ({ children }: Props) => {
  const context = useContext(ShuffleMatchContext);
  const circle: React.RefObject<HTMLDivElement> = useRef(null);
  const { width, height } = useWindowDimensions();

  useEffect(() => {
    const rect = circle.current?.getBoundingClientRect();
    context.setQuestionPosition({
      x: rect!.x,
      y: rect!.y,
    });
  }, [width, height]);

  return (
    <>
      <Component
        ref={circle}
      >
        <>{children}</>
      </Component>
    </>
  );
};

export default Circle;

问题在于，在第一次渲染时，domRect 对其中的所有内容都返回 0。我认为这种行为会发生，因为在第一次渲染中，您还没有准备好所有父组件。我使用了一个名为“useWindowDimensions”的钩子，事实上，当您调整屏幕大小时，domRect 返回预期值。有人可以帮忙吗？

Answer 1

您应该使用useLayoutEffect()。它允许您获取正确的 DOM 相关值（即特定元素的尺寸），因为它在所有 DOM 突变后同步触发。

useLayoutEffect(() => {
  const rect = circle.current?.getBoundingClientRect();
  context.setQuestionPosition({
    x: rect!.x,
    y: rect!.y,
  });
}, [width, height]);