迹忆客 专注技术分享

在 React 中使用 ref 获取元素的高度：

1. 初始化将存储元素高度的状态变量。
2. 在 useEffect() 挂钩中更新元素的高度。
3. 高度应设置为 ref.current.clientHeight。

import {useEffect, useState, useRef} from 'react';

export default function App() {
  const [divHeight, setDivHeight] = useState(0);

  const ref = useRef(null);

  useEffect(() => {
    setDivHeight(ref.current.clientHeight);
    console.log('height: ', ref.current.clientHeight);

    console.log('width: ', ref.current.clientWidth);
  }, []);

  return (
    <div ref={ref}>
      <h2>Some</h2>
      <h2>Content</h2>
      <h2>{divHeight}</h2>
    </div>
  );
}

我们在 useEffect 钩子中获取元素的高度，因为我们需要等待设置 ref 并等待 div 元素在访问其 clientHeight 属性之前呈现给 DOM。

clientHeight 属性返回元素的内部高度（以像素为单位）。 该属性包括填充但不包括边框、边距和水平滚动条。

或者，我们可以使用 offsetHeight 属性，它以像素为单位返回元素的高度，包括垂直填充和边框。

useEffect(() => {
  setDivHeight(ref.current.offsetHeight);
  console.log('height: ', ref.current.offsetHeight);

  console.log('width: ', ref.current.offsetWidth);
}, []);

我们传递给 useEffect 挂钩的第二个参数是一个依赖项数组。我们只想在组件挂载后设置 divHeight 状态变量，所以我们使用了一个空数组。

useRef() 钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的 div 元素。

当我们将 ref prop 传递给元素时，例如 <div ref={myRef} /> ，React将ref对象的 .current 属性设置为对应的DOM节点。

useRef 钩子创建一个普通的 JavaScript 对象，但在每次渲染时都会为您提供相同的 ref 对象。换句话说，它几乎是一个具有 .current 属性的记忆对象值。

需要注意的是，当你改变ref的当前属性的值时，不会导致重新渲染，所以我们不必在 useEffect 的依赖中添加它。

使用 ref 获取元素高度的关键时刻是在 useEffect 钩子中执行此操作，在设置 ref 并将元素呈现给 DOM 之后。