React — forwardRef、useImperaiveHandle

forwardRef：获取子组件的DOM元素

React.forwardRef 是 React 提供的一个 API，用于在函数组件中向子组件传递 ref。通过使用 React.forwardRef，我们可以将 ref 传递给函数组件内部的 DOM 节点或其他组件，从而实现对其进行操作。

import { forwardRef } from "react"
const Son = forwardRef((prop,ref)=>{
    return <input type="text" ref={ref}></input>

})



    const sonRef= useRef(null)
    const showRef = ()=>{
        console.log(sonRef)
        sonRef.current.focus()

    }

        <div className="box">
            <div>
                forwardRef
            </div>
            <div>

                <Son ref = {sonRef}></Son>
                <button onClick={()=>{
                    showRef()
                }}>foucus</button>
            </div>

        </div>

 useInperaiveHandle：通过ref暴露子组件中的方法

useImperativeHandle 是 React 提供的一个自定义 Hook，用于在函数组件中暴露特定的实例值或函数给父组件。通常情况下，父组件无法直接访问子组件的实例，但通过 useImperativeHandle，子组件可以选择性地暴露一些值或方法给父组件。

import { forwardRef ,useImperativeHandle,useRef} from "react"
const Son = forwardRef((prop,ref)=>{

    const inputref = useRef(null)
    const inputHandle = ()=>{
        inputref.current.focus()
    }
    useImperativeHandle(ref,()=>{

        return {inputHandle}
    })
    return <input type="text" ref={inputref} ></input>
})
const About= ()=>{
    const sonRef = useRef(null)
    const sonFocus = ()=>{
        // console.log(sonRef)
        sonRef.current.inputHandle()
    }
    return <>

        <div>
            <Son ref={sonRef}></Son>
            <button onClick={sonFocus}>focus</button>
        </div>
    
    </>
}

export default About