React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例;
- ReactDOM.render()渲染组件时返回的是组件实例;
- 渲染dom元素时,返回是具体的dom节点。
ref
可以挂载到组件上也可以是dom元素上;
- 挂到组件(
class
声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例: - 挂载到dom元素上时表示具体的dom元素节点。
Q:ref属性可以设置为一个回调函数
React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。
- 当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
- 当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。
- 当组件卸载的时候,会传入null
- ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
Q:当给组件、H5标签添加 ref 属性后,此实例只能在当前组件中被访问到,父组件的 refs 中是没有此引用的,例如:
var Parent = React.createClass({
render: function(){
return (
<div className = 'parent'>
<Child ref = 'child'/>
</div>
)
},
componentDidMount(){
console.log(this.refs.child); // 访问挂载在组件上ref
console.log(this.refs.child.refs.update); // 访问挂载在dom元素上的ref
}
})
var Child = React.createClass({
render: function() {
return (
<div ref="test">
<a ref="update">更新</a>
</div>
);
}
});
ReactDOM.render(
<Parent/>,
document.getElementById('example')
);
image.png
- 给 h5 元素设置 ref
<a ref="update">更新</a>
后,可以拿到它的真实 dom<a>更新</a>
。 - 给组件设置ref
<Child ref = 'child'/>
后,拿到的是组件的实例(上图中的Constructor
)
Q:获取ref引用组件对应的dom节点
不管ref设置值是回调函数还是字符串,都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。
image.png
image.png
但是对于html元素使用ref的情况,ref本身引用的就是该元素的实际dom节点,无需使用ReactDOM.findDOMNode(ref)来获取,该方法常用于React组件上的ref。
Q:this.refs
和 ReactDOM.findDOMNode
的区别
- ref添加到Compoennt上获取的是Compoennt实例,添加到原生HTML上获取的是DOM;
ReactDOM.findDOMNode
,当参数是DOM,返回值就是该DOM;当参数是Component获取的是该Component render方法中的DOM- 二者主要区别在ref绑定在组件上的时候,
this.refs
获取到的是组件实例,ReactDOM.findDOMNode
获取到的是dom节点。
Q:新版本的React已经不推荐我们使用ref string转而使用ref callback
<Child ref={child => this._child = child}/>
console.log(ReactDOM.findDOMNode(this._child))
作者:BubbleM
链接:https://www.jianshu.com/p/56ace3e7f565
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。