JIYIK CN >

refReact most commonly returns undefined or null when we try to access the current property before its corresponding DOM element is rendered . To solve this problem, you need to useEffectaccess it in a hook or when an event is triggered ref.

Let's look at the following code in App.js

import {useRef, useEffect} from 'react';

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

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

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // 👈️ 这里打印元素
  }, []);

  return (
    <div>
      <div ref={ref}>
        <h2>迹忆客(jiyik.com)</h2>
      </div>
    </div>
  );
}

The results of running the above code are as follows

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, then its current property will be null if accessed immediately .

Note that we have to access the current property of the ref object to access the div element on which we set the ref attribute.

When we refpass the prop to an element, for example <div ref={myRef} />, React sets the property refof the object .currentto the corresponding DOM node.

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

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

refWe can also access the current properties of the event handler .

import {useRef, useEffect} from 'react';

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

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

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // 👈️ 这里打印元素 
  }, []);

  const handleClick = () => {
    console.log(ref.current); // 👈️ 这里打印元素
  };

  return (
    <div>
      <div ref={ref}>
        <h2>迹忆客(jiyik.com)</h2>
      </div>

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

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