JIYIK CN >

Use ref in React to get the height of an element:

1. Initializes the state variable that will store the element's height.
2. useEffect()Update the element's height in the hook .
3. The height should be set to ref.current.clientHeight.

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>
  );
}

We useEffectget the element's height in the hook because we need to wait for the ref to be set and wait for the div element clientHeightto be rendered to the DOM before accessing its height property.

clientHeightThe property returns the intrinsic height of an element in pixels. This property includes padding but does not include borders, margins, and horizontal scroll bars.

Alternatively, we can use offsetHeightthe property, which returns the height of the element in pixels, including vertical padding and border.

useEffect(() => {
  setDivHeight(ref.current.offsetHeight);
  console.log('height: ', ref.current.offsetHeight);

  console.log('width: ', ref.current.offsetWidth);
}, []);

The second argument we pass to the useEffect hook is an array of dependencies. We only want to set the divHeight state variable after the component mounts, so we use an empty array.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we have to access the current property of the ref object in order 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 sets the ref object’s .current property to the corresponding DOM node.

useRefThe hook creates a normal JavaScript object but gives you the same ref object on every render. In other words, it's almost a memoized object value with a .current property.

It’s important to note that when you change the value of the current property of ref, it won’t cause a re-render, so we don’t have to useEffectadd it in the dependencies.

The key time to get the height of an element using a ref is useEffectto do it in the hook, after the ref is set and the element is rendered to the DOM.