08.useImperativeHandle-自定义暴漏给父级的实例值

294 阅读1分钟

useImperativeHandle可以让你在使用ref时,自定义暴漏给伏组件的实例值。useImperativeHandle一般和forwardRef一起使用。

   // Child.js
   import { useRef } from "react";
   
   function FancyInput(props, ref) {
     const inputRef = useRef();
     useImperativeHandle(ref, () => ({
       focus: () => {
         inputRef.current.focus();
       }
     }));
     return <input ref={inputRef} ... />;
   }
   FancyInput = forwardRef(FancyInput);
   
   //----------------------------------------------------------------------
   
   // 父组件渲染
   <FancyInput ref={myRef} />
   
   // 父组件使用方法
   myRef.current.focus();