React Hooks中父组件中调用子组件方法

React Hooks中父组件中调用子组件方法

场景： 在使用antd的Table组件时，对Table子组件进行了二次封装（<AsyncTable />）;在父组件（<f-comp />）中需要调用<AsyncTable />中的一个 函数，对antd原生Table上的dataSouce进行更新。所以，需要子组件中暴露一个函数供父组件调用，可以实时的去对子组件的值进行更新。

实现过程

使用到的hooks-- useImperativeHandle，useRef

/* child子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props子组件中需要接受ref
const ChildComp = ({cRef}) => {
	const [val, setVal] = useState();
	// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露给父组件的方法
	    changeVal: (newVal) => {
	      setVal(newVal);
	    }
  	}));
  	...
  	return (
		<div>{val}</div>
	)
}

/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {
	const childRef = useRef();
	const updateChildState = () => {
		// changeVal就是子组件暴露给父组件的方法
		childRef.current.changeVal(99);
	}
	...
	return (
		<>
			{/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
			<ChildComp ref={childRef} cRef={childRef} />
			<button onClick={updateChildState}>触发子组件方法</button>
		</>
	)
}