React Material UI - 导出多个高阶组件

IT技术 reactjs redux react-redux material-ui
2021-03-29 11:32:58

我一直坚持使用 redux 连接器导出 material-ui 样式。这是我的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';

const mapStateToProps = state => ({});

const reduxConnector = connect(mapStateToProps, null);
const styles = theme => {
    console.log(theme);
    return ({
        paper: {
            top: '80px',
            boxShadow: theme.shadows[9]
        },
    });
};

class Cart extends Component {

    render() {
        const { classes } = this.props;
        return (
            <Drawer
                open
                docked
                anchor="right"
                classes={{ paper: classes.paper }}
            >
                <p style={{ width: 250 }}>cart</p>

            </Drawer>
        );
    }
}

export default withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart); // I want to add this

我试过了：

export default reduxConnector(withStyles(styles))(Cart); // return Uncaught TypeError: Cannot call a class as a function

export default withStyles(styles, {name: 'Cart'})(reduxConnector(Cart)); // return Uncaught Error: Could not find "store" in either the context or props of "Connect(Cart)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Cart)".

有什么解决办法吗？

6个回答

试试这个 

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));

其中 App 是您的组件。这对我来说可以。

优秀的！对于使用连接到组件的两个功能的简单设置。两个以上更好recompose。
2021-05-25 11:32:58
以防万一有人不知道 mapDispatchToProps 是什么意思（比如我自己）stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops
2021-05-27 11:32:58
是的，是的，是的！
2021-06-21 11:32:58

看看它是如何在 material-ui 文档站点中处理的，特别是在AppFrame组件中：

export default compose(
  withStyles(styles, {
    name: 'AppFrame',
  }),
  withWidth(),
  connect(),
)(AppFrame);

他们正在使用recompose来做到这一点。

所以在你的情况下，它将是：

import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';

const styles = theme => {
  console.log(theme);
  return {
    paper: {
      top: '80px',
      boxShadow: theme.shadows[9],
    },
  };
};

const Cart = ({ classes }) =>
  <Drawer open docked anchor="right" classes={{ paper: classes.paper }}>
    <p style={{ width: 250 }}>cart</p>
  </Drawer>;

const mapStateToProps = state => ({});

export default compose(
  withStyles(styles, { name: 'Cart' }),
  connect(mapStateToProps, null)
)(Cart);
AppFrame 组件链接返回 404。@kengregory 你能更新答案以包含一个成功的链接吗？
2021-06-06 11:32:58
@robertjewell 完成。链接来自特定提交的版本，使其保持有效。
2021-06-12 11:32:58

没有recompose或compose：

Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);
看OP问题
2021-06-04 11:32:58
什么是 reduxConnector？
2021-06-16 11:32:58

安装npm install recompose或yarn add recompose

并在您的出口部分

export default compose(
    withStyles(styles, {
        name: 'App',
    }),
    connect(),
)(AppFrame);

我忘了导出我的商店。

这对我来说很完美

export default connect(mapStateToProps)((withStyles(styles)(ComponentNameToExport)));
其它你可能感兴趣的问题
上一篇ReactJS 中的导出（默认）类 下一篇Next.js：减少数据获取并在页面之间共享数据