React useImperativeHandle 子组件向父组件传值

父组件向子组件传值通过props传递，是很轻松的事。但在子组件中定义的useState,useRef值，要想在父组件中得到，却需要额外的props参数设置。

举例如下：

父组件:

 

子组件:

 关键解释如下：

父组件：

bond是一个ReactRef对象，存储在useState中，通过Son组件的bond props传递给Son组件。在父组件中通过调用bond.current就能调用子组件中包裹在useImpreativeHandle函数中的子组件函数，对子组件进行操作，这里调用getSonName是获取Son组件中的sonName值

子组件：

既然父组件需要获取我的值，那么，我就需要将在我的作用域内定义的值开放出来，通过使用React自带的useImpreativeHandle hooks就能做到这一点。

源码：

import React, { useState } from "react";

import Son from "./Son"

export default function Farther () {

    const [bond] = useState(React.createRef<{getSonName: () => string}>())

    const [fartherName] = useState("john")

    const sonName = bond.current?.getSonName()

    console.log(sonName)

    return <Son fartherName={fartherName} bond={bond} />

}

import React, { useImperativeHandle, useState } from "react";

export default function Son ({fartherName,bond}:{fartherName: string,bond: React.RefObject<{

    getSonName: () => string

}>}) {

    const [sonName] = useState("johnlove")

    const getSonName = () => {

        return sonName

    }

    useImperativeHandle(bond, () => {

        return{

          getSonName

        }

    })

    return <>

    {fartherName}

    </>

}