React中的Refs属性你来了解吗
1 介绍
react组件的三大属性:
1.props
属性:封装传递给组件的参数
2.state
属性:组件的状态,当值发生改变后,重新渲染组件
3.refs
属性:
(1)通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) ——DOM元素或render函数中的react元素的代理(句柄)
(2)本质是ReactDOM.render()
函数返回的实例(组件实例或DOM节点)
Refs在计算机中称为弹性文件系统。React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。本质为ReactDOM.render()
返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点。
作用:Refs时React提供给我们安全访问DOM元素或者某个组件实例的句柄。在类组件中,React将ref属性中第一个参数作为DOM中的句柄。在函数组件中,React用hooks的api useRef也能获得ref。
2 使用方法
2.1 createRef(版本>=React16.3)
一般在构造函数中将refs分配给实例属性,以供组件的其他方法中使用。
1、对于html元素:可以获取元素实例
示例代码:
class Refs extends React.Component { constructor(props) { super(props); // 在构造函数中初始化一个ref,然后在return中就可以使用了 this.myRef = React.createRef(); console.log(this.myRef); } componentDidMount() { // 在render()函数执行完成后调用 this.myRef.current.innerHTML = "橘猫吃不胖"; // this.myRef中有一个current属性 } render() { return ( <div> {/*如果ref属性被用于html,那么它的值就是底层DOM元素*/} <div ref={this.myRef}></div> </div> ); } }
2、可以和类组件进行绑定 —— 代表类组件的实例
示例代码:
class Refs extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount() { // 在父组件中调用了子组件的方法 this.myRef.current.change(); } render() { return <Children ref={this.myRef}/> } } class Children extends React.Component { change() { console.log("橘猫吃不胖变身"); } render() { return <span>橘猫吃不胖</span> } }
2.2 回调Refs
React将在组件挂载时,会调用ref回调函数并传入DOM怨怒是,当卸载时调用它并传入null。早componentDidMount或componentDidUpdate触发前,React会保证refs一定是最新的。
示例代码:
class Refs extends React.Component { constructor(props) { super(props); this.targetRef = null; this.myRef = (e) => this.targetRef = e; } componentDidMount() { console.log("this.refs" + this.refs.container); } render() { return <div ref={this.myRef}> 橘猫吃不胖 </div> } }
2.3 String类型的Refs(已过时,不推荐使用)
示例代码:
class Refs extends React.Component { constructor(props) { super(props); this.targetRef = null; this.myRef = (e) => this.targetRef = e; } componentDidMount() { console.log("this.refs" + this.refs.container); } render() { return <div ref={this.myRef}> 橘猫吃不胖 </div> } }
2.4 useRef(React Hooks)
function HookRef(props) { const inputElement = useRef(); return ( <div> <input ref={inputElement}/> <button onClick={() => { inputElement.current.focus() }}>获得焦点 </button> </div> ) }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/m0_46612221/article/details/123360259
相关文章
- 这篇文章主要介绍了C# 字段和属性的的相关资料,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下...2020-11-03
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。...2013-10-19
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要为大家介绍了Vue的计算属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-11-16
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06C# Dynamic关键字之:调用属性、方法、字段的实现方法
本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-11-10
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了关于vue属性使用和不使用冒号的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-22
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了C# 列表List的常用属性和方法介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06