九、React通过ref获取DOM节点组件实例

App

import React, { PureComponent, createRef } from "react";
import Hello from "./Hello";
import World from "./World";

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

    this.refTitle = createRef(); // 提前创建一个ref
    this.refHello = createRef(); // 提前创建一个ref
    this.refWorld = createRef(); // 函数组件
  }

  btnClick() {
    // console.log(this.refs.refHeader); // 已弃用
    console.log(this.refTitle.current);

    // 获取类组件实例调用里面的方法
    console.log(this.refHello.current);
    this.refHello.current.say();

    // 函数组件
    console.log(this.refWorld.current); // ref不适用于函数组件
  }

  render() {
    return (
      <div className="wrap">
        {/* <h2 ref="refHeader">这是标题</h2> */}
        <h3 ref={this.refTitle}>标题h3</h3>
        <Hello ref={this.refHello} />
        <button onClick={(e) => this.btnClick()}>按钮</button>
        <World ref={this.refWorld} />
      </div>
    );
  }
}

export default App;

Hello

import React, { PureComponent } from "react";

export class Hello extends PureComponent {
  say() {
    console.log("说话");
  }
  render() {
    return <div>Hello</div>;
  }
}

export default Hello;

World函数组件

// forwardRef包裹后函数会有第二个参数 ref， 使绑定的ref到具体某个元素上
import { memo, forwardRef } from "react";

const World = memo(
  forwardRef(function (props, ref) {
    return <div ref={ref}>World</div>;
  })
);

export default World;