Javascript 物料界面表格分页问题

我正在使用MaterialUI并遵循此示例

当我尝试为自定义表分页操作执行示例时，它不起作用。它返回的是inherits.js:5 Uncaught TypeError:超级表达式必须为null或函数错误

我把范围缩小到问题，当我添加下面的导入时，我可以看到上面的错误

import TablePagination from '@material-ui/core/TablePagination';

请找到下面的代码并建议我继续

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';

const actionsStyles = theme => ({
  root: {
    flexShrink: 0,
    color: theme.palette.text.secondary,
    marginLeft: theme.spacing.unit * 2.5,
  },
});

class TablePaginationActions extends React.Component {
  handleFirstPageButtonClick = event => {
    this.props.onChangePage(event, 0);
  };

  handleBackButtonClick = event => {
    this.props.onChangePage(event, this.props.page - 1);
  };

  handleNextButtonClick = event => {
    this.props.onChangePage(event, this.props.page + 1);
  };

  handleLastPageButtonClick = event => {
    this.props.onChangePage(
      event,
      Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1),
    );
  };



render() {
    const { classes, count, page, rowsPerPage, theme } = this.props;
return (
  <div className={classes.root}>
    <IconButton
      onClick={this.handleFirstPageButtonClick}
      disabled={page === 0}
      aria-label="First Page"
    >
      {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
    </IconButton>
    <IconButton
      onClick={this.handleBackButtonClick}
      disabled={page === 0}
      aria-label="Previous Page"
    >
      {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
    </IconButton>
    <IconButton
      onClick={this.handleNextButtonClick}
      disabled={page >= Math.ceil(count / rowsPerPage) - 1}
      aria-label="Next Page"
    >
      {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
    </IconButton>
    <IconButton
      onClick={this.handleLastPageButtonClick}
      disabled={page >= Math.ceil(count / rowsPerPage) - 1}
      aria-label="Last Page"
    >
      {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
    </IconButton>
      </div>
    );
  }
}
TablePaginationActions.propTypes = {
  classes: PropTypes.object.isRequired,
  count: PropTypes.number.isRequired,
  onChangePage: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  theme: PropTypes.object.isRequired,
};

const TablePaginationActionsWrapped = withStyles(actionsStyles, { withTheme: true })(
  TablePaginationActions,
);

let counter = 0;
function createData(name, calories, fat) {
  counter += 1;
  return { id: counter, name, calories, fat };
}

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
  },
  table: {
    minWidth: 500,
  },
  tableWrapper: {
    overflowX: 'auto',
  },
});

class CustomPaginationActionsTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        createData('Cupcake', 305, 3.7),
        createData('Donut', 452, 25.0),
        createData('Eclair', 262, 16.0),
        createData('Frozen yoghurt', 159, 6.0),
        createData('Gingerbread', 356, 16.0),
        createData('Honeycomb', 408, 3.2),
        createData('Ice cream sandwich', 237, 9.0),
        createData('Jelly Bean', 375, 0.0),
        createData('KitKat', 518, 26.0),
        createData('Lollipop', 392, 0.2),
        createData('Marshmallow', 318, 0),
        createData('Nougat', 360, 19.0),
        createData('Oreo', 437, 18.0),
      ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
      page: 0,
      rowsPerPage: 5,
    };
  }

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const { data, rowsPerPage, page } = this.state;
    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);

    return (
      <Paper className={classes.root}>
        <div className={classes.tableWrapper}>
          <Table className={classes.table}>
            <TableBody>
              {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
                return (
                  <TableRow key={n.id}>
                    <TableCell component="th" scope="row">
                      {n.name}
                    </TableCell>
                    <TableCell numeric>{n.calories}</TableCell>
                    <TableCell numeric>{n.fat}</TableCell>
                  </TableRow>
                );
              })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 48 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  colSpan={3}
                  count={data.length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  onChangePage={this.handleChangePage}
                  onChangeRowsPerPage={this.handleChangeRowsPerPage}
                  ActionsComponent={TablePaginationActionsWrapped}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </div>
      </Paper>
    );
  }
}

CustomPaginationActionsTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CustomPaginationActionsTable);

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableFooter”导入TableFooter；
从“@material ui/core/TablePagination”导入TablePagination；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/FirstPage”导入FirstPageIcon；
从“@material ui/icons/KeyboardArrowLeft”导入键盘arrowleft”；
从“@material ui/icons/KeyboardArrowRight”导入键盘arrowright”；
从“@material ui/icons/LastPage”导入LastPageIcon；
const actionsStyles=主题=>({
根目录：{
flexShrink:0，
颜色：theme.palete.text.secondary，
marginLeft:theme.space.unit*2.5，
},
});
类TablePaginationActions扩展了React.Component{
handleFirstPageButtonClick=事件=>{
this.props.onChangePage（事件，0）；
};
handleBackButtonClick=事件=>{
this.props.onChangePage（事件，this.props.page-1）；
};
handleNextButtonClick=事件=>{
this.props.onChangePage（事件，this.props.page+1）；
};
handleLastPageButtonClick=事件=>{
此.props.onChangePage(
事件
max（0，Math.ceil（this.props.count/this.props.rowsPerPage）-1），
);
};
render（）{
const{classes，count，page，rowsPerPage，theme}=this.props；
返回(
{theme.direction==='rtl'？：}
{theme.direction==='rtl'？：}
=Math.ceil（count/rowsPerPage）-1}
aria label=“下一页”
>
{theme.direction==='rtl'？：}
=Math.ceil（count/rowsPerPage）-1}
aria label=“最后一页”
>
{theme.direction==='rtl'？：}
);
}
}
TablePaginationActions.propTypes={
类：PropTypes.object.isRequired，
计数：需要PropTypes.number.isRequired，
onChangePage:PropTypes.func.isRequired，
页码：PropTypes.number.isRequired，
rowsPerPage:PropTypes.number.isRequired，
主题：PropTypes.object.isRequired，
};
const TablePaginationActionsWrapped=withStyles（actionsStyles，{withTheme:true}）(
表格分页操作，
);
设计数器=0；
函数createData（名称、卡路里、脂肪）{
计数器+=1；
返回{id:counter，name，carries，fat}；
}
常量样式=主题=>({
根目录：{
宽度：“100%”，
marginTop:theme.space.unit*3，
},
表:{
最小宽度：500，
},
包装纸：{
溢出x:'自动'，
},
});
类CustomPaginationActionsTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
createData（'Cupcake'，305，3.7），
createData（'Donut'，452，25.0），
createData（'Eclair'，262，16.0），
createData（“冷冻酸奶”，159，6.0），
createData（'Gingerbread'，356，16.0），
createData（'Honeycomb'，408，3.2），
createData（“冰淇淋三明治”，237，9.0），
createData（'Jelly Bean'，375，0.0），
createData（'KitKat'，518，26.0），
createData（'Lollipop'，392,0.2），
createData（'Marshmallow'，318,0），
createData（'Nougat'，360，19.0），
createData（'Oreo'，437，18.0），
].排序（（a，b）=>（a.卡路里{
this.setState（{page}）；
};
handleChangeRowsPerPage=事件=>{
this.setState（{rowsPerPage:event.target.value}）；
};
render（）{
const{classes}=this.props；
const{data，rowsPerPage，page}=this.state；
const emptyRows=rowsPerPage-Math.min（rowsPerPage，data.length-page*rowsPerPage）；
返回(
{data.slice（page*rowsPerPage，page*rowsPerPage+rowsPerPage）.map（n=>{
返回(
{n.name}
{n.卡路里}
{n.fat}
);
})}
{emptyRows>0&&(
)}
);
}
}
CustomPaginationActionsTable.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（CustomPaginationActionsTable）；

我认为这可能与这篇讨论循环依赖关系的文章有关。检查您的版本兼容性