反應：在 function 組件中使用 refs

Question

我是 React 的新手，我試圖弄清楚如何在我的 function 組件中使用 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>
  );
}

可以在這里找到演示

（將鼠標懸停在沙盒瀏覽器中的眼睛上時，理想情況下應該會導致控制台顯示一組眼睛的 x 和 y 坐標，但它會給出錯誤）

在 React 的文檔中，它說“但是，只要您引用 DOM 元素或 class 組件，您就可以在 function 組件中使用 ref 屬性”所以我不明白為什么上面的代碼不起作用。

Answer 1

您可以使用當前元素的getBoundingClientRect function 訪問偏移量，請參見以下代碼：

eyes.current.getBoundingClientRect().x