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(

        <div>

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

            <button onClick={ComponentAMethods} > click Me </button>

        </div>

  )

}

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

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>    // 点击子组件 调用父组件传递过来的方法 实现调用父组件方法

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

              </div>

        )

}

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