react中refs的理解

react中refs的理解

在react中refs的作用与vue中类似，都是用于对元素做标记以便于获取并修改DOM元素

注意：ref在原生DOM元素上和自定义组件上是不同的，ref在原生DOM元素上获取到的是DOM元素本身，而在自定义组件当中，ref获取到的是组件的子组件

目前较常用ref使用方式有两种
方式一：使用回调函数的形式

class RefExample extends React.Component{
  constructor(props){
    super(props);
    this.func = this.func.bind(this)
  }
  func(){
    this.dom.style.color = 'green'
  }
  render(){
    return (
      /* 回调函数中的参数为当前绑定的DOM对象，点击触发事件将按键字体颜色改为绿色，就是你头上的那个绿色 */
      <button ref={(dom)=>{this.dom = dom}} onClick={this.func}>Click me!</button>
    )
  }
}
ReactDOM.render(<RefExample/>,document.getElementById('root'))

方式二：使用react16后新增的createRef()的方式创建Ref然后将其挂载到DOM上

class RefExample extends React.Component{
  constructor(props){
    super(props);
    this.func = this.func.bind(this)
    // 1、创建ref对象
    this.myRef = React.createRef();
  }
  func(){
    // 3、获取元素并修改属性
    this.myRef.style.color = 'green'
  }
  render(){
    return (
      // 2、将ref对象挂载到dom元素上
      <button ref={this.myRef} onClick={this.func}>Click me!</button>
    )
  }
}
ReactDOM.render(<RefExample/>,document.getElementById('root'))

Refs转发

官方说法：Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧
实际上就是在父组件通过ref可以获取到子组件的元素

class RefExample extends React.Component{
  constructor(props){
    super(props);
    // 3、父组件通过转发将ref转发到子组件
    const FancyButton = React.forwardRef((props,ref) => {
      // 4、子组件挂载ref
      <button ref={ref}>
        {props.children}
      </button>
    })
    // 1、创建ref
    this.myRef = React.createRef();
  }
  render(){
    return (
      // 2、将ref对象挂载到dom元素上
      <FancyButton ref={this.myRef}>Click me!</FancyButton>
    )
  }
}
ReactDOM.render(<RefExample/>,document.getElementById('root'))