先使用 React.forwardRef;再使用 connect 包一層會使 ref 屬性漏掉纽绍,導(dǎo)致 內(nèi)部實例無法傳到外部箱残;
比如下面這樣
let Component = React.forwardRef((props,ref)=>{
const [form] = Form.useForm();
useImperativeHandle(ref,()=>({
submit:()=>{
form.submit();
}
}));
return (
<></>
)
});
export default connect(xxx,xxx)(Component);
正確的操作方式要調(diào)整高階組件的順序蟹腾,先用connect包裹,然后再用React.forwardRef包裹该抒。
代碼如下
let Component = (props)=>{
const {refInstance} = props;
// 只要是實例都行useForm和useRef創(chuàng)建的都可以
const [form] = Form.useForm();
useImperativeHandle(refInstance,()=>({
submit:()=>{
form.submit();
}
}));
return (
<>xxx</>
)
};
Component = connect(xxx, xxx)(Component);
//注意:這里不要在Component上使用ref;換個屬性名字比如refInstance;不然會導(dǎo)致覆蓋
export default React.forwardRef( (props,ref) => <Component {...props} refInstance={ref} />);
這樣就可以同時使用2個高階組件了喻粹。