React Material UI - 导出多个高阶组件
问题描述:
我被困在使用redux连接器导出material-ui样式。这里是我的代码:React 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)".
任何解决方案?
答
安装npm install recompose
或yarn add recompose
,并在您的出口部分
export default compose(
withStyles(styles, {
name: 'App',
}),
connect(),
)(AppFrame);
,我忘了我的出口店。
答
看看它是如何在物质的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);
答
没有recompose
或compose
:
Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);
的AppFrame部件链接返回一个404 @kengregory您可以更新的答案,包括一个成功的链接? – robertjewell
@robertjewell完成。链接来自特定提交的版本,以便它保持有效。 –