我坚持用redux连接器导出material-ui样式.这是我的代码：
@H_502_1@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
我试过了：
@H_502_1@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)".有解决方案吗
看一下如何在material-ui docs站点中处理它,特别是在
AppFrame组件中：
@H_502_1@export default compose(
withStyles(styles,{
name: 'AppFrame',}),withWidth(),connect(),)(AppFrame);
他们使用recompose来做到这一点.
所以在你的情况下,它将是：
@H_502_1@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);