首页 > 解决方案 > 在类组件中多次导出反应问题

问题描述

以前在我的 Class Component 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 连接。现在我面临一个道具不存在的问题。

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()。任何帮助将非常感激。谢谢

标签: reactjsreduxreact-redux

解决方案


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

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

推荐阅读