React Ref使用

如何通过refs获得对应的DOM？

• 使用时通过 this.refs.传入的字符串格式获取对应的元素，使用时 this.refs.变量名
• 对象是通过 React.createRef() 方式创建出来的，使用时 this.对象.current
• 在DOM被挂载时进行回调,这个函数会传入一个 元素对象，我们可以自己保存;使用时, 直接拿到之前保存的元素对象即可；

基本使用

import React, {PureComponent, createRef, memo} from "react";

// 基本用法
export default class Refs extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
    this.titleRef = createRef()
    this.titleEl = null
  }

  btnClick(){
    console.log(this.titleRef); // {current: p}
    this.refs.title.innerHTML = "通过 this.refs.传入的字符串格式获取对应的元素";
    this.titleRef.current.innerHTML = "获取到创建的对象其中有一个current属性就是对应的元素";
    this.titleEl.innerHTML = "直接拿到之前保存的元素对象";
  }

  render() {
    return (
      <div>
        <p ref="title">String Refs</p>
        <p ref={this.titleRef}>Create Ref</p>
        <p ref={element => this.titleEl = element}>Callback Ref</p>

        <button onClick={e=>this.btnClick()}>点击</button>
      </div>
    )
  }
}

ref 获取组件实例对象

class A extends PureComponent {
  btnClick() {
    console.log(this)  // A组件 这里父组件调用时, this 还是指向 A 组件
    console.log("Class A点击了");
  }

  render() {
    return (
      <div>
        <button onClick={e => this.btnClick()}>Class A点击</button>
      </div>
    )
  }
}

/*const B = memo(function () {
  let btnClick = function () {
    console.log("function B点击了");
  }
  return (
    <div>
      <button onClick={e => btnClick()}>function B点击</button>
    </div>
  )
})*/

export default class C extends PureComponent {
  constructor() {
    super();
    this.RefsA = createRef()
    // this.RefsB = null
  }
  btnClickA(){
    // console.log(this.RefsA); // {current: A}
    // 通过父组件执行子组件函数
    this.RefsA.current.btnClick();
  }

  // btnClickB(){
  //   console.log(this.RefsB);
  // }

  render() {
    return (
      <div>
        <A ref={this.RefsA}/>
        {/*由于函数组件没有实例,不能通过ref来获取*/}
        {/*<B ref={e => this.RefsB = e}/>*/}
        <button onClick={e=>this.btnClickA()}>通过Refs点击A</button>
        {/*<button onClick={e=>this.btnClickB()}>通过Refs点击B</button>*/}
      </div>
    )
  }
}

ref 注意点

/**
 * 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性；
 * 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
 * 不能在函数组件上使用 ref 属性，因为没有实例；
 */

在函数组件中获取ref实例 (使用forwardRef)

const Home = forwardRef(function (props,ref) {
  return (
      <div>
        <h2 ref={ref}>Home</h2>
      </div>
    )
  }
)

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.homeTitleRef = createRef();
  }

  render() {
    return (
      <div>
        <Home ref={this.homeTitleRef}/>
        <button onClick={e => this.printInfo()}>父组件打印函数组件ref</button>
      </div>
    )
  }

  printInfo() {
    console.log(this.homeTitleRef); // {current: h2}
  }
}