场景
开发过程中,遇到了一个场景,如下图
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>
)
}