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>
		)
	}
}