React Material UI - 導出多個高階組件

Question

我被困在使用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)". 

任何解決方案？

Answer 1

安裝npm install recompose或yarn add recompose

，並在您的出口部分

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

，我忘了我的出口店。

Answer 2

看看它是如何在物質的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); 

Answer 3

沒有recompose或compose：

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