web前端全系列 教程
1839个小节阅读:2242.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
React 也支持另一种设置 refs 的方式,不同于传递 React.createRef()
创建的Refs,我们可以给ref属性传递一个函数。在这个函数中通过参数来获取 React 组件实例或 HTML DOM 元素。
使用回调Refs
xxxxxxxxxx
componentDidMount() {
this.inputDom.focus()
this.refcom.onLog()
}
setInputRef = (ele) => {
console.log(ele)
this.inputDom=ele
}
setClassRef = (refcom) => {
console.log(refcom)
this.refcom=refcom
}
render() {
return (
<>
<input ref={this.setInputRef} />
<RefCom ref={this.setClassRef} />
</>
)
}
提示:
React 将在组件挂载时,会调用
ref
回调函数并传入 DOM 元素,当卸载时调用它并传入null
。在componentDidMount
或componentDidUpdate
触发前,React 会保证 refs 一定是最新的。
实时效果反馈
1. 下列说法正确的是:
A 给类组件设置ref并传递一个函数,则可以通过访问ref的current属性获取实例
B 给DOM设置ref并传递一个函数,则可以通过访问ref的current属性获取原生DOM
C 给DOM设置ref并传递React.createRef()
的返回值,则可以通过访问函数参数获取原生DOM
D 给类组件设置ref并传递一个函数,则可以通过访问函数的参数获取实例
答案
1=>D