React属性之Refs
Posted 橘猫吃不胖~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React属性之Refs相关的知识,希望对你有一定的参考价值。
React属性之Refs
1 介绍
react组件的三大属性:
- props属性:封装传递给组件的参数
- state属性:组件的状态,当值发生改变后,重新渲染组件
- 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()
if (this.targetRef)
this.targetRef.innerHTML = "橘猫吃不胖";
render()
return <div ref=this.myRef/>
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>
)
以上是关于React属性之Refs的主要内容,如果未能解决你的问题,请参考以下文章