useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值蝎毡。在大多數(shù)情況下袜刷，應(yīng)當(dāng)避免使用 ref 這樣的命令式代碼。useImperativeHandle 應(yīng)當(dāng)與 forwardRef 一起使用郊尝。 如果只是獲取子組件的某些屬性翰意、方法，則用useImperativeHandle就行麸锉，如果需要獲取子組件中某些元素钠绍、組件實例、則必定需要forwardRef淮椰。
父五慈、子組件在使用該hook時步驟如下：
- 父組件使用useRef(或createRef)創(chuàng)建一個ref對象，將這個ref對象賦給子組件的ref屬性
-
子組件使用forwardRef包裝自己主穗，允許作為函數(shù)組件的自己使用ref泻拦。然后使用useImperativeHandle鉤子函數(shù)，在該鉤子函數(shù)的第二個函數(shù)參數(shù)中返回一些狀態(tài)或方法忽媒，這個被返回的狀態(tài)或方法就可以被父組件訪問到争拐。 - 父組件使用創(chuàng)建的ref對象的current屬性獲取子組件暴露出的狀態(tài)或方法。
示例代碼如下：
import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" />
});
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button
onClick={() => fancyInputRef.current.focus()} // 調(diào)用子組件的方法
>父組件調(diào)用子組件的 focus</button>
</div>
)
}
ReactDOM.render(<App />, root);
