在 React 中获取 Parent 的高度和宽度

作者

在 React 中获取 Parent 的高度和宽度

Get the Parent height and width in React

在 React 中获取父元素的高度和宽度：

  1. ref在元素上设置道具。
  2. 在useEffect挂钩中，更新高度和宽度的状态变量。
  3. 使用offsetHeight和offsetWidth属性获取元素的高度和宽度。
应用程序.js
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);

    // 👇️ if you need access to parent
    // of the element on which you set the 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>
  );
}

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

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

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

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

应用程序.js
useEffect(() => {
  setHeight(ref.current.offsetHeight);
  setWidth(ref.current.offsetWidth);

  // 👇️ if you need access to parent
  // of the element on which you set the 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
属性。

应用程序.js
console.log(ref.current.parentElement);
console.log(ref.current.parentElement.offsetHeight);
console.log(ref.current.parentElement.offsetWidth);

该parentElement属性返回 DOM 节点的父元素，或者null如果节点没有父元素，或者它的父元素不是 DOM 元素。

您也可以使用
clientHeight
和
clientWidth
属性。

应用程序.js
useEffect(() => {
  setHeight(ref.current.clientHeight);
  setWidth(ref.current.clientWidth);

  // 👇️ if you need access to parent
  // of the element on which you set the ref
  console.log(ref.current.parentElement);
  console.log(ref.current.parentElement.clientHeight);
  console.log(ref.current.parentElement.clientWidth);
}, []);

clientWidth

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

clientHeight属性返回元素的

内部高度（以像素为单位）。它包括填充但不包括边框、边距和水平滚动条（如果存在）。

–

发表评论