Réagir Matériel de l'INTERFACE utilisateur - Export multiple supérieur de l'ordre des composants

Je suis bloqué sur l'exportation de matériel-l'interface utilisateur de styles avec redux connecteur. Voici mon code:

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

J'ai essayé:

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

Toute solution?

Peut-être qu'il est temps de sortir de Tiroir dans un composant de présentation, et de passer de “l'ouvrir” et “ancrée” comme accessoires? De cette façon, vous pouvez garder votre appareil connecté à l'écart d'avoir à traiter avec des styles... d'autre part, il peut être ennuyeux à écrire des wrappers comme ça à chaque fois que vous utilisez un matériau de composants d'interface utilisateur.

OriginalL'auteur ssuhat | 2017-08-16

  1. 44

    Juste essayer ce 

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

    Où l'Application est un composant.
    Il fonctionne très bien pour moi.

    très simple et ça fonctionne très bien
    Merci copain...
    Excellent! Pour une configuration simple à l'aide de deux fonctions connecté à un composant. Pendant plus de deux c'est mieux recompose.
    Juste au cas où quelqu'un ne sait pas ce que mapDispatchToProps moyens (comme moi) stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops
    Oui, oui et oui!

    OriginalL'auteur Alex Moleiro

  2. 25

    Jetez un oeil à la façon dont elle est traitée dans le matériau d'interface utilisateur docs du site, en particulier dans le AppFrame composant:

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

    Ils utilisent recomposer pour ce faire.

    Donc dans votre cas, il serait:

    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);
    Le AppFrame composant lien retour sur une page 404. @kengregory de mise à jour de la réponse à inclure un lien réussi?
    fait. Lié à une version spécifique de commettre de sorte qu'il demeure valide.

    OriginalL'auteur Ken Gregory

  3. 8

    Sans recompose ou compose:

    Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);
    qu'est-ce que reduxConnector?
    Regarder la question de l'OP
    ahh je vois, mon mauvais.

    OriginalL'auteur storm_buster

  4. 7

    installer npm install recompose ou yarn add recompose

    et sur votre section d'exportation

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

    et j'ai oublié d'exporter mon magasin.

    OriginalL'auteur ssuhat

  5. 0

    Vous pouvez utiliser ce ci-dessous. Comme les deux withStyles et connecter étaient d'ordre supérieur composants

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

    OriginalL'auteur Jeeva