持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

前言

今天来分享一下父子组件相互调用函数的操作以及Hook中useRef的使用。希望今天我的技术分享能够给你们带来一点微弱的帮助，如果文中有错误，希望能够及时地指出，我也能够及时地去更正。希望可以达到一起共同进步的效果。

具体内容

子组件调用父组件的函数：

//父组件
export default funtion Father(){
	const getInfo = () => {
            //XXX
	}
	return (
		<div>
			<Children 
				getInfo={getInfo}
			/>
		</div>
	)
}


//子组件
export default function Children(props){
	return (
		<div>
			<span onClick={props.getInfo}>调用父组件函数</span>
		</div>
	)
}

像这样，父组件通过传值的方式使得子组件能够调用父组件的相关函数，父组件利用回调函数的形式可以接收子组件传过来的值。

父组件调用子组件的函数：

import {useRef} from 'react'
export default funtion Father(){
	const getInfo = () => {
            //XXX
	}
	const getChildRef = () =>{
		childRef.current
	}
	return (
		<div>
			<Children 
				ref={childRef}
				getInfo={getInfo}
			/>
			<button onClick={getChildRef}>获取子组件实例</button>
		</div>
	)
}


//子组件
import {useImperativeHandle,forwardRef} from 'react'
function Children(props,ref){
	useImperativeHandle(ref, () => ({
        childRef : ()=>{
            //想要暴露给父组件的函数或者数据
        }
    }))
	return (
		<div>
			<span onClick={props.getInfo}>调用父组件函数</span>
		</div>
	)
}
export default forwardRef(Children);

父组件调用子组件的函数会比上面子组件调用父组件的函数要麻烦一些，需要利用到Ref来获取子组件的实例，然后利用forwardRef和useImperativeHandle来配合使用，将想要子组件暴露的函数或者数据通过useImperativeHandle来暴露出去，随后在父组件中利用ref.current去获取相关的实例对象上面的所有属性方法。

PS：特别需要注意的是，forwardRef和useImperativeHandle需要配合着使用，否则会出现一些问题导致报错。

总结

通过写项目的方式学习了很多之前知识大略看过而没有实践的知识，使用起来还是挺费力的，再写ref获取子组件踩了很多坑，比如上述的PS没有配合着使用出现了很多问题，希望这篇文章能够帮助到你们。