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

有什么办法吗?

#1楼 票数:58

试试这个

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));

应用是您的组件。 这对我来说可以。

#2楼 票数:31

在material-ui docs网站中,特别是在AppFrame组件中,看一下它是如何处理的:

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

他们正在使用重组来做到这一点。

因此,在您的情况下,它将是:

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

#3楼 票数:10

recompose compose

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

#4楼 票数:9 已采纳

安装npm install recomposeyarn add recompose

在您的出口部分

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

我忘了出口我的商店。

#5楼 票数:0

您可以在下面使用它。 由于withStyles和connect都是高阶组件

export default withStyles(styles, {name: 'Cart'})(connect(mapStateToProps, mapDispatchToProps), Cart);

#6楼 票数:0

完整组件

    import React from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import ExpansionPanel from "@material-ui/core/ExpansionPanel";
    import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
    import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
    import Typography from "@material-ui/core/Typography";
    import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
    import { withStyles } from "@material-ui/core/styles";
    import { connect } from "react-redux";
    import { fetchPosts } from "../../store/actions/postActions";
    import PropTypes from "prop-types";

    const useStyles = theme => ({
        root: {
            marginLeft: 250,
            marginRight: 10
        },
        heading: {
            fontSize: "1rem",
            fontWeight: theme.typography.fontWeightRegular
        }
    });

    class SimpleExpansionPanel extends React.Component {
        UNSAFE_componentWillMount() {
            this.props.fetchPosts();
        }

        UNSAFE_componentWillReceiveProps(nextProps) {
            if (nextProps.newPost) {
                this.props.postsa.unshift(nextProps.newPost);
            }
        }

        render() {
            const { classes } = this.props;
            const postItem = this.props.postsa.map(post => (
                <ExpansionPanel key={post.id}>
                    <ExpansionPanelSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1a-content"
                        id="panel1a-header">
                        <Typography className={classes.heading}>{post.title}</Typography>
                    </ExpansionPanelSummary>
                    <ExpansionPanelDetails>
                        <Typography>{post.body}</Typography>
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            ));
            return <div className={classes.root}>{postItem}</div>;
        }
    }

    SimpleExpansionPanel.propTypes = {
        fetchPosts: PropTypes.func.isRequired,
        postsa: PropTypes.array.isRequired,
        newPost: PropTypes.object
    };

    const mapStateToProps = state => ({
        postsa: state.postss.items,
        newPost: state.postss.item
    });

    export default connect(
        mapStateToProps,
        { fetchPosts }
    )(withStyles(useStyles)(SimpleExpansionPanel));

#7楼 票数:0

这对我来说很完美

export default connect(mapStateToProps)((withStyles(styles)(ComponentNameToExport)));

  ask by ssuhat translate from so

未解决问题?本站智能推荐:

1回复

material-ui,组件不起作用

我在http://www.material-ui.com/#/components/raised-button上查看了代码。 当我不使用Material-ui时, Nav可以很好地工作。 5:8警告'RaisedButton'已定义,但从未使用过no-unused-vars
1回复

Material-ui TextField搞乱了react-redux

我有一个带有TextField的react组件: 组件通过使用react-redux的connect函数生成的容器连接到商店。 目前没有传递给容器的参数。 并且不会在组件中的任何位置调度任何操作。 当我尝试在TextField输入一些文本时,我看到一些正在调度的动作,我可以看到
11回复

找不到模块:无法解析“material-ui/AutoComplete”

我安装了 material-ui-search-bar 然后我想使用 SearchBar。 但我有下一个问题: 我该如何解决?
1回复

使用 Redux 存储数据填充 Material-UI 下拉列表

我正在尝试让我的 Redux 存储字段自动填充我导入的方法。 我是否以正确的方式来完成这项工作? 我是否需要为每个字段创建映射选项? 我的每个下拉列表都插入了一个 PopulateDropdown 列表和每个下拉列表中的字段,但我需要根据 id 和文本对它们进行拆分。 我在下面正确访问我的 re
1回复

将状态传递给React / Redux中的递归嵌套组件

我有一个组件,它具有与组件本身相同类型的子组件。 我也可以渲染孩子,但孩子似乎无法进入他们的状态。 我正在使用React和Redux export class Material extends React.Component { constructor(props) { su
1回复

使用withStyles()和compose()以及Redux / Firebase / Material UI导出组件

因此,我尝试使用Firebase和redux进行存储,并使用Material UI作为设计来组合该应用程序。 我已经启用了firebase和firestore缩减器,所有这些,当我尝试同时使用firebase和withStyles()导出组件时,我遇到了一个问题。 (它是分开工作的,当我
1回复

React/Redux 无法正确更新状态且无法在组件中使用

我是 React 和 Redux 的新手,一直在关注官方 Redux 文档待办事项列表示例https://redux.js.org/basics/example ,最近更改了我的代码以遵循演示/容器组件结构。 我尝试了许多不同的移动 API 调用的方法,但状态中的权重对象经常显示为未定义(可能是因为
2回复

React-Redux 和 Material UI:组件不会将 store 传递给“已连接”的孩子

重复代码沙盒https://ndg6d.csb.app/ 完整错误Uncaught Error: Could not find "store" in the context of "Connect(UploadInternal)". Either wrap the root component i