在 React 中获取父级的高度和宽度

在 React 中获取父级的高度和宽度:

  1. 在元素上设置 ref 属性。
  2. 在 useEffect 钩子中,更新高度和宽度的状态变量。
  3. 使用 offsetHeight 和 offsetWidth 属性来获取元素的高度和宽度。
import {useEffect, useRef, useState} from 'react';

export default function App() {
  const ref = useRef(null);

  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    setHeight(ref.current.offsetHeight);
    setWidth(ref.current.offsetWidth);

    // 👇️ 如果您需要访问设置 ref 的元素的父级
    console.log(ref.current.parentElement);
    console.log(ref.current.parentElement.offsetHeight);
    console.log(ref.current.parentElement.offsetWidth);
  }, []);

  return (
    <div ref={ref}>
      <h2>Width: {width}</h2>

      <h2>Height: {height}</h2>
    </div>
  );
}

在 React 中获取父级的高度和宽度

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

注意 ,我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的 div 元素。

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

我们将一个空的依赖数组传递给 useEffect 钩子,所以它只会在组件挂载时运行。

useEffect(() => {
  setHeight(ref.current.offsetHeight);
  setWidth(ref.current.offsetWidth);

  // 👇️ 如果您需要访问设置 ref 的元素的父级
  console.log(ref.current.parentElement);
  console.log(ref.current.parentElement.offsetHeight);
  console.log(ref.current.parentElement.offsetWidth);
}, []);

我们使用了 useEffect 钩子,因为我们需要等待在元素上设置 ref 并等待元素被渲染,然后再访问它的 offsetHeight 和 offsetWidth 属性。

offsetHeight 属性以像素为单位返回元素的高度,包括垂直填充和边框。

offsetWidth 属性以像素为单位返回元素的宽度,包括任何边框、填充和垂直滚动条(如果存在)。

如果我们需要访问设置 ref 的元素的父元素的宽度和高度,请使用 parentElement 属性。

console.log(ref.current.parentElement);
console.log(ref.current.parentElement.offsetHeight);
console.log(ref.current.parentElement.offsetWidth);

parentElement 属性返回 DOM 节点的父元素,如果节点没有父节点,或者其父节点不是 DOM 元素,则返回 null

我们也可以使用 clientHeight 和 clientWidth 属性。

useEffect(() => {
  setHeight(ref.current.clientHeight);
  setWidth(ref.current.clientWidth);

  // 👇️ 如果您需要访问设置 ref 的元素的父级
  console.log(ref.current.parentElement);
  console.log(ref.current.parentElement.clientHeight);
  console.log(ref.current.parentElement.clientWidth);
}, []);

clientWidth 属性,以像素为单位返回元素的宽度,包括填充但不包括边框、边距和垂直滚动条(如果存在)。

clientHeight 属性返回元素的内部高度(以像素为单位)。 它包括填充,但不包括边框、边距和水平滚动条(如果存在)。