一榕订、自定義組件使用ref并且透傳子組件ref
自定義組件中使用ref需要用到react的2個hooks：
1.forwardRef
2.useImperativeHandle
- useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值
- useImperativeHandle 應當與 forwardRef 一起使用
自定義組件：
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
// 這里可以加自己的邏輯哦
inputRef.current.focus();
}
}));
return (
<div>
<input ref={inputRef} type="text" />
<div>我是自定義的函數(shù)式組件</div>
</div>
)
});
使用：
import FancyInput from '@/components/FancyInput ';
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button onClick={() => {fancyInputRef.current.focus()}}>
調(diào)用FancyInput組件的 focus方法
</button>
</div>
)
}
ReactDOM.render(<App />, root);
二、React.forwardRef和connect的聯(lián)合使用問題
先使用 React.forwardRef;再使用 connect 包一層會使 ref 屬性漏掉贩幻，導致 內(nèi)部實例無法傳到外部两嘴；
正確的操作方式要調(diào)整高階組件的順序，先用connect包裹憔辫，然后再用React.forwardRef包裹贰您。
const VerificationCode = (props: VerificationCodeType) => {
useImperativeHandle(props.refInstance, () => ({ // 導出ref屬性字段
myFunction(){
console.log('myFunction');
}
}));
return <></>;
};
const ConnectVerificationCode = connect( // 鏈接dva
({ models }: { models: ModelsType }) => ({
models,
}),
)(VerificationCode);
export default forwardRef((props: VerificationCodeType, ref) => ( // 包裹forwardRef
<ConnectVerificationCode
{...props}
refInstance={ref}
></ConnectVerificationCode>
));
這樣就可以同時使用2個高階組件了拢操。
