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