React.forwardRef和connect的联合使用问题

先使用 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;
    const [form] = Form.useForm();
    useImperativeHandle(refInstance,()=>({
        // 这个对象是向外部抛出的内部的属性或者方法，按需配置
       submit:()=>{
          form.submit();
       }
    }),[]); // 这里的依赖数组视情况是否要更新refInstance对象去配置
    return (
       <>xxx</>
    )
};
Component = connect(xxx, xxx)(Component);
//注意：这里不要在Component上使用ref;换个属性名字比如refInstance；不然会导致覆盖
export default React.forwardRef( (props,ref) => <Component  {...props}  refInstance={ref} />);

这样就可以同时使用2个高阶组件了。