先使用 React.forwardRef;再使用 connect 包一层会使 ref 属性漏掉,导致 内部实例无法传到外部;
比如下面这样
let Component = React.forwardRef((props,ref)=>{
const [form] = Form.useForm();
useImperativeHandle(ref,()=>({
submit:()=>{
form.submit();
}
}));
return (
<></>
)
});
export default connect(xxx,xxx)(Component);
正确的操作方式要调整高阶组件的顺序,先用connect包裹,然后再用React.forwardRef包裹。
代码如下
let Component = (props)=>{
const {refInstance} = props;
// 只要是实例都行useForm和useRef创建的都可以
const [form] = Form.useForm();
useImperativeHandle(refInstance,()=>({
submit:()=>{
form.submit();
}
}));
return (
<>xxx</>
)
};
Component = connect(xxx, xxx)(Component);
//注意:这里不要在Component上使用ref;换个属性名字比如refInstance;不然会导致覆盖
export default React.forwardRef( (props,ref) => <Component {...props} refInstance={ref} />);
这样就可以同时使用2个高阶组件了。