React报错之Function components cannot have string refs
2023-03-07 09:09:52 时间
总览
当我们在一个函数组件中使用一个字符串作为ref
时,会产生"Function components cannot have string refs"错误。为了解决该错误,使用useRef()
钩子来得到一个可变的ref
对象,这样你就可以在组件中作为ref
使用。
function-components-cannot-have-string-refs.png
这里有个示例用来展示错误是如何发生的。
// 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
属性并不会导致重新渲染。
- 本文译自:https://bobbyhadz.com/blog/react-function-components-cannot-have-string-refs
- 作者:Borislav Hadzhiev
相关文章
- Linux 操作系统目录结构解释
- gedit 深色模式下高亮文本不可见?以下是你能做的
- 希尔排序,冷门但是有趣的排序算法
- 秒杀场景下订单中心的架构设计
- 改进嵌入式开发的五个技巧
- 四个超实用的 Docker 镜像构建技巧
- 保护数据安全,克隆 Linux 硬盘四种方法
- Linux 内核裁剪框架初探
- 谷歌正式推出 Chrome OS Flex 系统,可在旧设备上流畅运行
- Linux性能问题分析流程与性能优化思路
- 零基础开发 Node.js Addons 插件:参数与返回值处理
- 软件工程中可持续性为什么很重要
- OpenHarmony IPC 服务的动态加载(拉起)流程(L2)
- Linux 不需要防病毒软件或防火墙的六个原因
- 如何从 Linux 终端发送桌面通知与提醒
- 关于防御性编程,你应该知道的事
- Linux系统下怎么修改文件所属用户和组?
- Linux 综合性命令及解析
- 如何在 60秒内优化提升 Linux 性能?只有 2% 的人知道
- 最近版 Opera 引发 Windows 可靠性监视器错乱