Ref 在 React 中返回 undefined 或 null [已解决]

Ref returns undefined or null in React [Solved]

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

应用程序.js


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所以它的current属性设置为
undefined。

如果我们传递null给钩子，它的current属性将是null立即访问。

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

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

我们使用useEffect钩子是因为我们想确保已在元素上设置并且该元素已呈现给 DOM。 ref

如果我们尝试直接在组件中访问的current属性ref，我们会undefined返回，因为 ref 尚未设置且div元素尚未呈现。

您还可以在事件处理函数中访问的current属性。ref

应用程序.js


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，所以我们可以访问它。

结论

–