react 父组件调用子组件方法 ,子组件暴露方法给父组件

正常情况下 父组件调用子组件 直接在子组件上传递 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>
	)
}


你可能感兴趣的:(react,js)