reactjs - puedo - Interfaz de usuario de material reactivo: exporta múltiples componentes de orden superior

tipos de componentes react

Question

Estoy atascado en la exportación de estilos material-ui con conector redux. Aquí está mi código:

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

He intentado:

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)".

¿Alguna solución?

Answer 1

Sin recompose o compose :

Cart = withStyles(styles, {name: ''Cart''})(Cart);
export default reduxConnector(Cart);

Answer 2

instalar npm install recompose o yarn add recompose

y en su sección de exportación

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

y olvidé exportar mi tienda.

Answer 3

Observe cómo se maneja en el sitio material-ui docs, específicamente en el componente AppFrame :

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

Están usando recomponer para hacer esto.

Entonces en tu caso, sería:

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);