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();