迹忆客 专注技术分享

在 React 中获取元素的宽度：

1. 在元素上设置 ref 属性。
2. 在 useLayoutEffect 挂钩中，更新宽度的状态变量。
3. 使用 offsetWidth 属性获取元素的宽度。

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

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

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

  useLayoutEffect(() => {
    setWidth(ref.current.offsetWidth);
    setHeight(ref.current.offsetHeight);
  }, []);

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

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

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

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

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

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

useLayoutEffect(() => {
  setWidth(ref.current.offsetWidth);
  setHeight(ref.current.offsetHeight);
}, []);

useLayoutEffect 钩子与 useEffect 相同，但在所有 DOM 突变后同步触发。

useLayoutEffect 钩子通常用于从 DOM 中读取布局。

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

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

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

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

useLayoutEffect(() => {
  setWidth(ref.current.clientWidth);
  setHeight(ref.current.clientHeight);
}, []);

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