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]);

如何在 React 中使用 DOMRect 和 useEffect？

1 个答案: