reactjs - 无法使用react-redux中的连接功能

Question

我一直在尝试将 redux 与material-ui 中的appbar 组件一起使用。但无法正常使用连接功能。

控制台中显示错误消息“无法将类作为函数调用”。

我正在使用 React 16.1.1 以及 redux 3.7.2 和 React-redux 5.0.6

让我知道如何在这种情况下使用连接功能。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import {connect} from 'react-redux';
import * as dataTableAction from '../actions/dataTableAction';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';

const styles = theme => ({
    root: {
        width: '100%'
    },
    flex: {
        flex: 1
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20
    }
});


function ButtonAppBar(props) {
    const { classes } = props;
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
                        <MenuIcon />
                    </IconButton>
                    <Typography type="title" color="inherit" className={classes.flex}>
                        Home
                    </Typography>
                    <Button color="inherit"
                            onClick={this.props.dispatch(dataTableAction.createDataTable(this.state.dataTable))}>
                        Change state
                    </Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

ButtonAppBar.propTypes = {
    classes: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
    return{
        dataTable: state.dataTable
    }
}


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

Answer 1

您需要在调用 connect 之前注入(inject)样式

const styledComponent = withStyles(styles)(ButtonAppBar);
export default connect(mapStateToProps)(styledComponent);

您还可以使用撰写:

import compose from 'recompose/compose';

export default compose(
  withStyles(styles),
  connect(mapStateToProps, null)
)(ButtonAppBar);

查看React Material UI - Export multiple higher order components了解更多信息