useImperativeHandle与forwardRef结合使用

码不动的码蜂

已于 2022-09-26 15:27:35 修改

阅读量423

点赞数 1

文章标签：前端 react

于 2022-09-23 00:20:00 首次发布

本文链接：https://blog.csdn.net/hhhhhhaaaaaha/article/details/127002443

版权

其实主要作用就是父组件可以使用子组件的方法或者控制子组件，可以在父组件中触发子组件功能

当使用useImperativeHandle时，需要子组件中的第二个参数ref当作useImperativeHandle的第一个参数

forwardRef其实本质是一个高阶组件，用来传递Ref

//父组件
//forwardRef类其实算高阶组件
const ChildInput = forwardRef(ChildrenComponent);

function App = ()=>{
    const inputRef = useRef(null);
    useEffect(()=>{
        inputRef.current.focus()
    },[])
    return (
        <div><ChildInput ref={inputRef}/></div>
    )
}


//子组件
function ChildrenComponent(props,ref){
    const inputRef = useRef(null);
    useImperativeHandle(ref,()=>inputRef.current);
    return <input type='text' name='child input' ref={inputRef}></input>
}

//后续会继续更新只是最近用到了记录一下