需求:
前端遇到这样一个功能,一个父组件包裹着一个子组件,父组件内的搜索区域输入搜索参数之后会触发子组件的搜索函数,刷新数据。如图:
- 选择搜索参数之后,点击搜索;
- 触发子组件获取表单的函数(这里本来想把子组件数据获取放到父组件,但是因为考虑到数据之后会有更多的操作,就尽量减少耦合)
- 刷新Table
于是就希望能在父组件点击搜索的操作函数内,去触发子组件的获取table数据的函数,这样就可以完成功能。这就要用到父子组件的通信。
因为这里用到的都是函数式组件(相比Class组件生命周期较多,逻辑复杂,难以拆分等缺点。函数式组件可以很容易去拆分,测试并且进行逻辑的复用)
父组件调用子组件函数
1、在父组件中使用useRef去创建一个ref实例,并且绑定到子组件
import React,{ useRef} from 'react'
//父组件
function Father (props) {
const unitRef =