函数组件在 React 中不能有字符串引用

Function components cannot have string refs in React

当我们在函数组件中使用字符串作为引用时，会出现“Function components cannot have string refs”的错误。

要解决该错误，请使用useRef()挂钩获取一个可变的 ref 对象，您可以将其用作组件内部的 ref。

函数组件不能有字符串引用

下面是错误如何发生的示例。

应用程序.js


export default function App() {
  // A string ref has been found within a strict mode tree.
  // ⛔️ Function components cannot have string refs.
  // We recommend using useRef() instead.
  return (
    <div>
      <input type="text" id="message" ref="msg" />
    </div>
  );
}

代码示例中的问题是我们使用字符串作为引用。

使用`useRef`钩子解决错误

要解决该错误，请改用useRef
挂钩来获取可变引用对象。

应用程序.js


import {useEffect, useRef} from 'react';

export default function App() {
  const refContainer = useRef(null);

  useEffect(() => {
    // 👇️ this is reference to input element
    console.log(refContainer.current);

    refContainer.current.focus();
  }, []);

  return (
    <div>
      <input type="text" id="message" ref={refContainer} />
    </div>
  );
}

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

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

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

该useRef钩子创建了一个普通的 JavaScript 对象，但在每次渲染时都会为您提供相同的 ref 对象。换句话说，它几乎是一个带有.current属性的记忆对象值。

current需要注意的是，当你更改ref 的属性值时，不会导致重新渲染。

例如，ref 不必包含在挂钩的 dependencies 数组中，
useEffect因为更改其current属性不会导致重新渲染。

应用程序.js


import {useEffect, useRef} from 'react';

export default function App() {
  const refContainer = useRef(null);

  const refCounter = useRef(0);

  useEffect(() => {
    // 👇️ this is reference to input element
    console.log(refContainer.current);
    refContainer.current.focus();

    // 👇️ incrementing ref value does not cause re-render
    refCounter.current += 1;
    console.log(refCounter.current);
  }, []);


  return (
    <div>
      <input type="text" id="message" ref={refContainer} />
    </div>
  );
}

useEffect示例中的钩子只运行了 2 次，因为它useRef的内容更改时不会通知我们。

更改对象的current属性不会导致重新渲染。

current如果您尝试在呈现相应的 DOM 元素之前
访问 ref 的属性，您将得到一个null或一个undefined值
。

如果您使用 TypeScript，您可能会收到错误
useRef“Object is possibly null”