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 我无法获得新的状态值

React hook useRef 不适用于样式化组件和打字稿

React Hooks 快速入门:从一个数据请求开始