迹忆客 专注技术分享

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

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() 钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

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

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

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 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 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>
  );
}

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

总结

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