迹忆客 专注技术分享

当我们尝试在其对应的 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>
  );
}

上面代码的运行结果如下

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

当用户点击按钮时，ref 已经设置好，相应的元素已经渲染到 DOM，所以我们可以访问它。