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;
    //  只要是实例都行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个高阶组件了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。