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])  
return <>
   <ChildCmp ref={childCmpRef}/>
   </>  
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM