JIYIK CN >

Getting the width of an element in React:

1. Set the ref attribute on the element .
2. In useLayoutEffectthe hook, update the state variable for width.
3. Use offsetWidththe property to get the width of an element.

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()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .currentattributes are initialized to the passed argument.

注意, we must access the current property of the ref object to access the div element on which we set the ref attribute.

When we pass a ref prop to an element, for example <div ref={myRef} />, React .currentsets the property of the ref object to the corresponding DOM node.

We pass an empty dependencies array to useLayoutEffectthe hook, so it will only run when the component is mounted.

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

useLayoutEffectHook is useEffectthe same as , but is fired synchronously after all DOM mutations.

useLayoutEffectHooks are usually used to read the layout from the DOM.

We use useLayoutEffectthe hook because we need to wait to set a ref on an element and wait for the element to be rendered before accessing its offsetHeight and offsetWidth properties.

The offsetWidth property returns the width of an element in pixels, including any borders, padding, and vertical scroll bar (if any).

The offsetHeight property returns the height of an element in pixels, including vertical padding and border.

Alternatively, we can use the clientWidth property, which returns the width of the element in pixels, including padding but excluding borders, margins, and vertical scrollbar (if present).

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

The clientHeight property returns the intrinsic height of the element in pixels. It includes padding but excludes borders, margins, and the horizontal scroll bar (if present).