hook 中useRef获取子组件内容 forwardRef,useImperativeHandle,

Warning:Function components cannot be given refs

 报错说明:

      子组件不使用forwardRef、useImperativeHandle 那么在父组件中，通过childRef拿到的current就为null，并且还会报错

 解决:

函数式组件中没有实例!!

子组件中:

     在子组件中设置一个值,在父组件修改

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

function Child(props, ref) {
    const [age, setAge] = useState(122)
    useImperativeHandle(ref, () => {

    // 返回的是要暴露的东西
        return {
            age,
            setAge

        }
    })
    return <div>
        Child
        <p>age is {age} </p>
    </div>
}

export default forwardRef(Child)

父组件:

     子组件没有暴露的时候 childRef.current  值为null,说明没有实例

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

export default function Index() {
    // 创建一个Ref 
    const childRef = useRef(null)

    const changeAge = () => {
        console.log(childRef)
        const { age, setAge } = childRef.current
        setAge(age + 1)
    }

    return <div>
       
        <button onClick={changeAge}>更改子组件的年龄</button>
        <Child ref={childRef} />

    </div>


}