通过在类组件中多次导出来解决问题

问题描述

以前，在我的类组件中，redux connect看起来像这样。这项工作没有任何问题。

//File: MyComponent.jsx
    //in below code this.props.selectProducts is not undefined and this works fine
        const mapStatetoProps = null;
        const mapActionsToProps = {
            selectProducts
        };
        
        export default connect(
            mapStatetoProps,mapActionsToProps
        )(MyComponent);

此后，我不得不使用名为notistack的组件来显示小吃栏，然后将其默认导出，而不是现有的redux connect。现在我面临的问题是道具不存在。

const mapStatetoProps = null;
const mapActionsToProps = {
    selectProducts
};

//Now this.props.selectProducts is undefined which is part of redux store
//But this.props.enqueueSnackbar("Preference saved."); this works. which is part of withSnackbar
export const ConnectedList = connect(
    mapStatetoProps,mapActionsToProps
)(MyComponent);
export default withSnackbar(MyComponent);

如果我将redux作为默认连接，则无法访问this.props.enqueueSnackbar（）。任何帮助将非常感激。谢谢

解决方法

只需在withSnackbar返回的组件上使用connect并使用它：

const ConnectedList = connect(
    mapStateToProps,mapActionsToProps
)(MyComponent);
export default withSnackbar(ConnectedList);