React 解决 Ref 返回 undefined 或者 null 问题

React 6月前 42

当我们尝试在其对应的 DOM 元素呈现之前访问其当前属性时，React ref 最常见的返回 undefined 或 null。要解决此问题，需要在 useEffect 钩子或触发事件时访问 ref。

我们看下面 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>
  );
}

上面代码的运行结果如下

React 解决 Ref 返回 undefined 或者 null 问题

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

我们没有将初始值传递给 useRef ，因此它的当前属性设置为 undefined。

如果我们将 null 传递给钩子，那么如果立即访问，它的当前属性将为 null。

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

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

我们使用了 useEffect 钩子，因为我们想确保元素上已经设置了 ref 并且元素已经被渲染到 DOM。

如果我们尝试直接在组件中访问 ref 的当前属性，我们会得到 undefined ，因为 ref 尚未设置且 div 元素尚未渲染。

我们还可以在事件处理函数中访问 ref 的当前属性。

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