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包裹