正常情况下 父组件调用子组件 直接在子组件上传递 ref 属性就可以直接获取
问题阅读:
问题1 :高阶组件 如何获取传入组建的 的属性方法?
问题2: 如果不用ref 如何获取子组件中的方法 并在父组件中调用?
背景:在 Ant Design 下,针对使用 Form.create 创建的组件,ref 取到的是 Form 相关的属性和方法,
要获取到自定义的属性和方法,得使用 wrappedComponentRef 才行。(官方处理方式)
1、思路 wrappedComponentRef (高阶组件中使用wrappedComponentRef 代替 ref)
直接替换 具体百度一下
2、 通过函数回调 在子组件创建成功后 将this返回 (class 组件将this 返回 会带所有的方法 ,)
或者在此处返回指定的子组件函数方法
具体实现代码:
子组件 :
const ChildComp =(props) => {
const {handleEvent } = props
const testEvent = ()=>{
console.log('子组件事件被触发')
}
uesEffect(()=>{
handleEvent( testEvent )
},[])
return (
)
}
父组件
const ParentCop = () => {
const childEvent = useRefs()
const handleEvent = (event)=>{
childEvent.current = event // 获取子组件传出的事件
}
const click = ()=>{
childEvent.current.testEvent()
// '子组件事件被触发'
}
return (
<ChildComp handleEvent = { handleEvent } />
<div onClick=(click)>点击触发</div>
)
}
版权声明:本文为qq_42359718原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。