React之ref属性

来源:网络 文章列表 2019-10-08 8
React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例;ReactDOM.render()渲染组件时返回的是组件实例;渲染dom元素时,返回是具体的dom节点。

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')
);

  • 给 h5 元素设置 ref <a ref="update">更新</a>后,可以拿到它的真实 dom<a>更新</a>
  • 给组件设置ref<Child ref = 'child'/>后,拿到的是组件的实例(上图中的Constructor)

Q:获取ref引用组件对应的dom节点
不管ref设置值是回调函数还是字符串,都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况,ref本身引用的就是该元素的实际dom节点,无需使用ReactDOM.findDOMNode(ref)来获取,该方法常用于React组件上的ref。

Q:this.refsReactDOM.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))

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接