React - 组件传值以及方法调用

--------------------父组件-----------------------------

import React,{useRef} from 'react'

import Child from './child'

function ComponentA (){

const dataobj ={

pdata1:1
}

const childUseAMethods=()=>{

// ...do something
}

const childRef = useRef()
// 通过ref拿到子组件相关方法
const ComponentAMethods=()=>{

childRef.current._childFn() // 父组件调用子组件方法
}

return(

<Child ref={ childRef } params1={dataobj.pdata1} handlerClick={childUseAMethods}/>

click Me

)

}
---------------------子组件-----------------------------

import React,{useRef,Ref,useImperativeHandle,forwardRef} from 'react'

const Child=(props,ref)=>{

const { params1 , childUseAMethods } = props // 接收父组件参数,方法

const toUseA = useRef()

useImperativeHandle(ref,()=>{ // 父组件调用子组件方法

return(

_childFn()

)

})

return(

// 点击子组件 调用父组件传递过来的方法 实现调用父组件方法

<div ref={ toUseA } onClick={childUseAMethods } />

)

}

export default forwardRef(Child) // 一定要用forwardRef包裹