React报错Function components cannot have string refs
总览
当我们在一个函数组件中使用一个字符串作为ref时，会产生"Function components cannot have string refs"错误。为了解决该错误，使用useRef()钩子来得到一个可变的ref对象，这样你就可以在组件中作为ref使用。
这里有个示例用来展示错误是如何发生的。
// App.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>
);
}
上述代码片段的问题在于，我们使用了字符串作为ref。
useRef
为了解决该错误，使用useRef钩子来获取可变的ref对象。
// App.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属性被初始化为传递的参数。
需要注意的是，我们必须访问ref对象上的current属性，以获得对我们设置了ref属性的input元素的访问。
当我们传递ref属性到元素上时，比如说，<input ref={myRef} /> 。React将ref对象上的.current属性设置为相应的DOM节点。
useRef钩子创建了一个普通的JavaScript对象，但在每次渲染时都给你相同的ref对象。换句话说，它几乎是一个带有.current属性的记忆化对象值。
不会重新渲染
应该注意的是，当你改变ref的current属性的值时，不会引起重新渲染。
例如，一个ref不需要包含在useEffect钩子的依赖数组中，因为改变它的current属性不会引起重新渲染。
// App.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属性并不会导致重新渲染。
以上就是React报错Function components cannot have string refs的详细内容，更多关于React报错Function components cannot have string refs的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了浅谈React之状态(State)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了React.memo函数中的参数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React项目动态修改主题颜色的方案,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了React diff算法的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家介绍了React classnames原理及测试用例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了react的hooks的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本文我们将介绍 React中组件的类别，以及如何创建和使用组件。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了React中的生命周期和子组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-08-08
在 React 中进行路由跳转有多种方法,具体取决于你使用的路由库和版本,以下是常见的路由跳转方法汇总,主要基于 react-router-dom 库,文中并通过代码示例介绍的非常详细,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了详解React服务端渲染从入门到精通，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最新评论