Question

我是React的新手，我试图弄清楚如何在函数组件中使用Refs来获取div的宽度。以下是一些证明我困惑的代码：

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
  const eyes = useRef();

  function onMouseMoveFn(e) {
    const x = eyes.current.offsetX();
    const y = eyes.current.offsetY();
    console.log(x, y, eyes);
  }

  return (
    <div onMouseMove={onMouseMoveFn}>
      <div class="eyes" ref={eyes}>
        <div class="eye" />
        <div class="eye" />
      </div>
    </div>
  );
}

可以找到一个演示here

（将鼠标悬停在沙箱浏览器的眼睛上方时，理想情况下，控制台会显示该组眼睛的x和y坐标，但会出现错误）

在React的文档中，它说：“但是，只要您引用DOM元素或类组件，就可以在函数组件中使用ref属性”，所以我不明白为什么上面的代码没有工作。

Answer 1

您可以使用当前元素的getBoundingClientRect函数来访问偏移量，请参见以下代码：

eyes.current.getBoundingClientRect().x

反应：在功能组件中使用引用

1 个答案: