React操作dom之refs(三种方式进行详解)

在react里面，一些情况我们不得不操作dom，可以利用refs，目前来说有三种方式，下面一种一种进行介绍

方式一:传入字符串
使用时通过this.refs.传入的字符串格式获取对应的元素;

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 ref="titleRef">Hello React</h2> 
        <button onClick={e=>this.changeValue()}>改变文本</button>
      </div>
    )
  }
  changeValue(){
    this.refs.titleRef.innerHTML ='方式一'
  }
}

方式二:传入一个对象(react推荐的方式)
对象通过React.createRef()方式创建出来的
使用时获取到创建的对象其中有一个current属性就是对应的元素

import React, { PureComponent,createRef } from 'react'
先导入createRef
	export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.titleRef =createRef()
  }
  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello React</h2>
        <button onClick={e=>this.changeValue()}>改变文本</button>
      </div>
    )
  }
  changeValue(){
    this.titleRef.current.innerHTML = '方式二'
  }
}

方式三:传入一个函数
该函数会在DOM被挂载时进行回调,这个函数会传入一个元素对象,我们可以自己保存
使用时,直接拿到之前保存的元素对象即可

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.titleEl = null
  }
  render() {
    return (
      <div>
        <h2 ref={(args)=>this.titleEl =args}>Hello React</h2>
        <button onClick={e=>this.changeValue()}>改变文本</button>
      </div>
    )
  }
  changeValue(){
    this.titleEl.innerHTML ='方式三'
  }
}

再来说下ref的类型

ref的值根据节点的类型而有所不同，当ref属性用于HTML元素时，构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性

但是当ref属性用于自定义class组件时

ref对象接收组件的挂载实例作为其current属性

下面来具体演示一下，当ref属性用于自定义class组件

定义一个类组件，当点击button时候，数字的数量+1

class Counter extends PureComponent{
  constructor(props){
    super(props);
    this.state ={
      counter:0
    }
  }
  render(){
    return (
      <div>
        <h2>{this.state.counter}</h2>
        <button onClick={e=>this.addNmber()}>数量+1</button>
      </div>
    )
  }
  addNmber(){
    this.setState({
      counter:this.state.counter+1
    })
  }
}

将它放入App组件中，现在需求是点击App组件里面的事件，让Counter组件里面数字的数量也能+1

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.createNumber =createRef()
  }
  render() {
    return (
      <div>
        <Counter ref={this.createNumber}/>
        <button onClick={e=>this.changeValue()}>改变数量+1</button>
      </div>
    )
  }
  changeValue(){
     this.createNumber.current.addNmber()
  }
}

注意！你不能在函数组件上使用ref属性,因为他们没有实例