高阶组件(HOC) 之 dva connect 和 forwardRef 同时使用解决方案

2,167 阅读1分钟

背景:同一组件既需要 connect 包裹,又需要 forwardRef 拿到 ref。

方案一(参考react-redux源码):

const TargetComponent = React.forwardRef((props, ref) => {
    return <></>;
});

export default connect(state => state, null, null, { forwardRef: true })(TargetComponent);

方案二:

const TargetComponent = React.forwardRef((props, ref) => {
    return <></>;
});

function wrap(Component) {
    const ForwardRefComp = (props) => {
        const { forwardedRef, ...rest } = props;
        return <Component ref={forwardedRef} {...rest} />;
    };
    
    const StateComp = connect(state => state)(ForwardRefComp);
    
    return React.forwardRef((props, ref) => <StateComp {...props} forwardedRef={ref} />);
}

export default wrap(TargetComponent);