JIYIK CN >

React refs most often return undefined or null when we try to access their current properties before the corresponding DOM element is rendered . To fix this, you need to access the ref in the useEffect hook or when an event is triggered.

import {useRef, useEffect} from 'react';

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

  console.log(ref.current); // 👈️ undefined here

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // 👈️ element here
  }, []);

  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </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 didn't pass an initial value to useRef, so its current property is set to undefined.

If we pass null to the hook, its current property will be null if accessed immediately.

请注意, 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 properties of the ref object .currentto the corresponding DOM node.

We use useEffectthe hook because we want to make sure that the ref has been set on the element and that the element has been rendered to the DOM.

If we try to access the current property of ref directly in the component, we'll get back undefined because ref hasn't been set yet and the div element hasn't been rendered yet.

We can also access the current properties of the ref in the event handler.

import {useRef, useEffect} from 'react';

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

  console.log(ref.current); // 👈️ undefined here

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // 👈️ element here
  }, []);

  const handleClick = () => {
    console.log(ref.current); // 👈️ element here
  };

  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

When the user clicks the button, the ref is already set and the corresponding element is rendered to the DOM, so we can access it.

Summarize

React refs most often return undefined or null when we try to access their current properties before the corresponding DOM element is rendered . To fix this, useEffectaccess the ref in a hook or when an event is triggered.