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

作者

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

Get the Height of an Element using a Ref in React

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

  1. 初始化将存储元素高度的状态变量。
  2. useEffect()在挂钩中更新元素的高度。
  3. 高度应设置为ref.current.clientHeight.
应用程序.js
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
属性，它以像素为单位返回元素的高度，包括垂直填充和边框。

应用程序.js
useEffect(() => {
  setDivHeight(ref.current.offsetHeight);
  console.log('height: ', ref.current.offsetHeight);

  console.log('width: ', ref.current.offsetWidth);
}, []);
我们传递给useEffect挂钩的第二个参数是依赖项数组。我们只想divHeight在组件挂载后设置状态变量，所以我们使用了一个空数组。

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

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

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

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

需要注意的是，当你更改currentref的属性值时，不会导致重新渲染，所以我们不必在.dependencies中添加它useEffect。

使用 ref 获取元素高度的关键时刻是在
useEffecthook 中执行它，在ref已设置并且元素已呈现给 DOM 之后。

–