react hooks 之 useRef, useImperativeHandle
Posted lisiyang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react hooks 之 useRef, useImperativeHandle相关的知识,希望对你有一定的参考价值。
1 用法如下: // 子组件 const ChildCmp =(props, ref) => { const [value, setValue] = useState(‘‘); const click = useCallback(() => { console.log(value) }, [value]) // 将click方法暴露出去。父组件可以通过ref获取到 useImperativeHandle(ref, () => { return {clickfun: click} }) return <>123</> }
// 父组件 const ParentCmp =(props) => { const [value, setValue] = useState(‘‘); const childCmpRef= useRef(null); const click = useCallback(() => { childCmpRef&&childCmpRef.current&&childCmpRef.current.clickfun&&childCmpRef.current.clickfun() }, [value]) // 将click方法暴露出去。父组件可以通过ref获取到 useImperativeHandle(ref, () => { return {clickfun: click} }) return <> <ChildCmp ref={childCmpRef}/> </> }
以上是关于react hooks 之 useRef, useImperativeHandle的主要内容,如果未能解决你的问题,请参考以下文章
ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕
react hooks之useDebounce useThrottle
React Hooks:为啥 useRef Hook 的 .current 为空?
在 React-Hooks UseRef 我无法获得新的状态值