react ref 获取dom的三种方式

方式一：字符串方式（不推荐）

1. 通过 ref="自定义名称" 绑定
2. 通过 this.refs.自定义名称 来获取 dom 元素
   注意： 必须在类组件中才可使用，不要在 react 严格模式下使用（会控制台报 Warning，但不会阻断程序），注释掉 <React.StrictMode>可解决

import React from "react";
class Component1 extends React.Component {
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.refs.content.innerHTML =
              this.refs.content.innerHTML === "白虎" ? "青龙" : "白虎";
          }}
        >
          点击
        </button>
        <div ref="content">青龙</div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Component1 />
    </div>
  );
}

export default App;

方式二：回调函数方式（推荐）

1. 通过 ref={(el) => {this.自定义属性 = el} 绑定
2. 通过 this.自定义属性 来获取 dom 元素
   注意：必须在类组件中才可使用

import React from "react";
class Component1 extends React.Component {
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.contentEl.innerHTML =
              this.contentEl.innerHTML === "白虎" ? "青龙" : "白虎";
          }}
        >
          点击
        </button>
        <div
          ref={(el) => {
            this.contentEl = el;
          }}
        >
          青龙
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Component1 />
    </div>
  );
}

export default App;

方式三：React.createRef()（react v16 新提出）

1. 通过 constructor 构造函数中创建，this.自定义属性名 = React.createRef()
2. 通过 ref={this.自定义属性名} 绑定
3. 通过 this.自定义属性名.current 来获取 dom 元素
   注意：必须在类组件中才可使用

import React from "react";
class Component1 extends React.Component {
  constructor(props) {
    super(props);
    this.contentEl = React.createRef();
  }
  render() {
    return (
      <div>
        React
        <button
          onClick={() => {
            this.contentEl.current.innerHTML =
              this.contentEl.current.innerHTML === "白虎" ? "青龙" : "白虎";
          }}
        >
          点击
        </button>
        <div ref={this.contentEl}>青龙</div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Component1 />
    </div>
  );
}

export default App;