关于reactjs：React Material UI-导出多个高阶组件


React Material UI - Export multiple higher order components

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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

我试过了：

1
2
3
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)".

有什么办法吗？

相关讨论

试试这个

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

应用是您的组件。
这对我来说可以。

相关讨论

在material-ui docs网站中，特别是在AppFrame组件中，看一下它是如何处理的：

1
2
3
4
5
6
7
export default compose(
  withStyles(styles, {
    name: 'AppFrame',
  }),
  withWidth(),
  connect(),
)(AppFrame);

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

因此，在您的情况下，它将是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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);
相关讨论

没有recompose或compose：

1
2
Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);
相关讨论

安装npm install recompose或yarn add recompose

在您的出口部分

1
2
3
4
5
6
export default compose(
    withStyles(styles, {
        name: 'App',
    }),
    connect(),
)(AppFrame);

我忘了出口我的商店。

这对我来说很完美

1
export default connect(mapStateToProps)((withStyles(styles)(ComponentNameToExport)));

Complete Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    import React from"react";
    import { makeStyles } from"@material-ui/core/styles";
    import ExpansionPanel from"@material-ui/core/ExpansionPanel";
    import ExpansionPanelSummary from"@material-ui/core/ExpansionPanelSummary";
    import ExpansionPanelDetails from"@material-ui/core/ExpansionPanelDetails";
    import Typography from"@material-ui/core/Typography";
    import ExpandMoreIcon from"@material-ui/icons/ExpandMore";
    import { withStyles } from"@material-ui/core/styles";
    import { connect } from"react-redux";
    import { fetchPosts } from"../../store/actions/postActions";
    import PropTypes from"prop-types";

    const useStyles = theme => ({
        root: {
            marginLeft: 250,
            marginRight: 10
        },
        heading: {
            fontSize:"1rem",
            fontWeight: theme.typography.fontWeightRegular
        }
    });

    class SimpleExpansionPanel extends React.Component {
        UNSAFE_componentWillMount() {
            this.props.fetchPosts();
        }

        UNSAFE_componentWillReceiveProps(nextProps) {
            if (nextProps.newPost) {
                this.props.postsa.unshift(nextProps.newPost);
            }
        }

        render() {
            const { classes } = this.props;
            const postItem = this.props.postsa.map(post => (
                <ExpansionPanel key={post.id}>
                    <ExpansionPanelSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1a-content"
                        id="panel1a-header">
                        <Typography className={classes.heading}>{post.title}</Typography>
                    </ExpansionPanelSummary>
                    <ExpansionPanelDetails>
                        <Typography>{post.body}</Typography>
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            ));
            return {postItem};
        }
    }

    SimpleExpansionPanel.propTypes = {
        fetchPosts: PropTypes.func.isRequired,
        postsa: PropTypes.array.isRequired,
        newPost: PropTypes.object
    };

    const mapStateToProps = state => ({
        postsa: state.postss.items,
        newPost: state.postss.item
    });

    export default connect(
        mapStateToProps,
        { fetchPosts }
    )(withStyles(useStyles)(SimpleExpansionPanel));

您可以在下面使用它。 由于withStyles和connect都是高阶组件

1
export default withStyles(styles, {name: 'Cart'})(connect(mapStateToProps, mapDispatchToProps), Cart);