React-Hooks中父组件获取子组件的属性

React-Hooks中父组件获取子组件的属性

依赖于forwardRef和 useImperativeHandle

首先子组件的写法如下

使用useImperativeHandle将需要传递给父组件的属性添加, 需要配套forwardRef一块使用

import React, { forwardRef, ForwardRefRenderFunction, useState, useImperativeHandle } from 'react'

interface ICom {
  test: string
}

const ChildrenCom: ForwardRefRenderFunction<any, ICom> = (props, ref) => {
  const { test } = props
  const [tranText, setText] = useState<string>('我是子组件内部的数据')

  useImperativeHandle(ref, () => ({
    tranText,
    num: 9527
  }))
  return (
    <div>
      <p>ChildrenCom-----{test}</p>
    </div>
  )
}
export default forwardRef(ChildrenCom)

父组件通过useRef获取, 使用useEffect是为了保证页面加载完成, 第二个参数中添加getChildRef.current也是为了保证数据变化, 如果获取的是undefined , 可以尝试再添加setTimeout

import React, { useRef, useEffect } from 'react'
import ChildrenCom from './children'

const FatherCom = () => {
  const getChildRef = useRef<{
    tranText: string
    num: number
  }>()
  useEffect(() => {
    console.log(getChildRef.current)
    // 或者使用定时器保证数据准确性
    // setTimeout(() => {
    //  console.log(getChildRef.current)
    // })
  }, [getChildRef.current])
  return (
    <div>
      <ChildrenCom ref={getChildRef} test="我是父组件传递的数据"/>
    </div>
  )
}

export default FatherCom