reactjs – React Material UI – 导出多个更高阶的组件

发布时间：2020-12-15 20:53:40 所属栏目：百科来源：网络整理

导读：我坚持用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 fr

我坚持用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)".

有解决方案吗

看一下如何在material-ui docs站点中处理它,特别是在 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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!