React中ref的理解

(1)React的ref有3种用法:

  1. 字符串
    dom节点上使用,通过this.refs[refName]来引用真实的dom节点
 //this.refs['inputRef']来访问
  1. 回调函数
    React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。
  • 当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
  • 当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。
  • 当组件卸载的时候,会传入null
  • ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
 {this.textInput = input;}} type="text" />   //HTML 元素添加 ref 属性时
 {this.textInput = input;}} />   //组件添加 ref 属性
  1. React.createRef()
    在React 16.3版本后,使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性
    将能拿到dom节点或组件的实例
<

你可能感兴趣的:(我的前端,react.js,javascript,前端)