react函数式组件和类组件创建ref的方法

感谢内容提供者：​​金牛区吴迪软件开发工作室​​

在react开发过程中，有时会碰到一些需求需要我们去操控dom，那么我们就可以给组件挂载一个ref属性，然后就可以通过ref调用这个组件的方法或者属性之类的。

接下来我们就来看看函数组件和类组件都是如何去挂载创建ref和使用它的：

---

函数式组件(Hook)：

// 首先引入React及useRef
import React, { useRef } from 'react;
function Content() {
  // 创建ref
  const fileInputEl = useRef(null);
  return (
    <>
      {/* 在你的元素或者组件上面挂载ref */}
      <input ref={fileInputEl} type={'file'} hidden />
      {/* 使用ref */}
      {/* 当点击这个div的时候触发input的点击事件 */}
      <div onClick={() => fileInputEl.current.click()}>上传文件</div>
    </>
  )
}

---

类组件创建使用ref

// 引入React
import React, { Component } from 'react';
export default class Content extends Component {
  constructor(props) {
    super(props);
    // 通过React.createRef()创建ref,挂载到组件上
    this.editTableEl = React.createRef();
  }
  componentWillReceiveProps() {
    // 当走入componentWillReceiveProps生命周期时会触发此ref挂载到的组件的refreshDataSource()方法（PS：这个方法是自己在挂载ref的那个组件中定义的）
    this.editTableEl.current && this.editTableEl.current.refreshDataSource();
  }
  render() {
    return (
      <div>
        <EditableTable
          // 挂载ref
          ref={this.editTableEl}
        />
      </div>
    )
  }
}