React函数组件Hooks实现兄弟组件方法互相调用及父组件调用子组件方法

场景

开发过程中，遇到了一个场景，如下图

header为这个页面的子组件，而每个选项卡对应的页面也都是这个页面的子组件，而header上面有一个发布按钮，业务逻辑是点击发布按钮去对5个选项卡对应的页面进行必填字段校验，如果那个选项卡对应页面没有通过校验，会对对应的选项卡进行提示，如下图
那也就意味着header这个子组件要去调用每个选项卡子组件的校验函数，兄弟组件间函数调用。

实现逻辑

这里要在子组件使用一个hook，通过ref把自己的方法暴露给父组件，供父组件调用useImperativeHandle(ref,()=>({}),[])，第一个参数是一个Ref，是父组件传过来的空的useRef()，用来接受子组件暴露的方法的，第二个参数是个回调函数，返回一个对象，里面要把子组件要暴露出去的方法名字写进去，第三个参数暂时用不上。要和forwardRef搭配使用，使用这个hook的组件外面要用forwardRef包裹，看下面的案例，具体看下官方的文档useImperativeHandle官网介绍

兄弟组件互相调用方法 伪代码案例

父组件

	const event = useRef()

	
	<div>
		<HeaderComponent event={event}  />
		<TabBarComponent event={event} />
	</div>

TabBarComponent 组件

export const TabBarComponent:React.FC<Props> = forwardRef(
	(props:Props)=>{
	const { event } = props


	//暴露方法 handelValid 给父组件
	useImperativeHandle(event,()=>({
		handelValid
	}))

	// 要暴露给父组件的方法
	const handelValid = ()=>{
		// 子组件逻辑 
	}

	return(
		<div>
		</div>
	)
}
)

HeaderComponent组件

export const HeaderComponent:React.FC<Props> = (props:Props)=>{
	//父组件通过props 把 TabBarComponent组件暴露出来的方法传递到这
	const { event } = props

	
	const publish = ()=>{
	// 调用这个方法 首先传递的是Ref 要.current然后.传递方法的方法名
		event.current.handelValid()
	}

	return(
		<div>
			<button onClick={publish}>发布</button>
		</div>
	)
}