Question

我想做的是在First Page的{{3}}中添加Last Page，material-ui链接。这是我的文件，当我编译文件时，它将引发以下错误。我确定它是 TablePaginationActions ，但是找不到问题的原因。任何帮助将不胜感激。请查看以下文件：

TableComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
import ToolTip from '../ToolTip';
import tablePropType from './tablePropType';
import TablePaginationActions from './TablePaginationActions';

const TableWrapper = styled(Paper)`
  && {
    overflow-x: auto;
    margin: 5px;
  }
`;

const Head = (props) => {
  const { order, orderBy, columns, handleSort, testId } = props;
  return (
    <TableHead data-testid={`${testId}-tableHead`}>
      <TableRow>
        {columns.map(column => (
          <TableCell
            key={column.id}
            align={column.numeric ? 'right' : 'inherit'}
            padding={column.disablePadding ? 'none' : 'default'}
            sortDirection={orderBy === column.id ? order : false}
          >
            <ToolTip
              title="Sort"
              enterDelay={300}
              testId={`${testId}-tableHead-ToolTip`}
            >
              <TableSortLabel
                active={orderBy === column.id}
                direction={order}
                onClick={handleSort(column.id)}
              >
                <Typography>{column.label}</Typography>
              </TableSortLabel>
            </ToolTip>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
};

Head.propTypes = {
  columns: PropTypes.arrayOf(Object).isRequired,
  orderBy: PropTypes.string.isRequired,
  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
  handleSort: PropTypes.func.isRequired,
  testId: PropTypes.string.isRequired,
};

class TableComponent extends React.Component {
  componentWillMount() {
    const data = this.sort(this.props.order, this.props.orderBy);
    this.props.setState({ data });
  }

  sort = (order, orderBy) => {
    const data =
      order === 'desc'
        ? this.props.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
        : this.props.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));

    return data;
  }

  handleSortClick = property => () => {
    const orderBy = property;
    let order = 'desc';

    if (this.props.orderBy === property && this.props.order === 'desc') {
      order = 'asc';
    }
    const data = this.sort(order, orderBy);

    this.props.setState({ data, order, orderBy });
  }

  handleClick = id => (event) => {
    this.props.onClick({ event, id });
  }

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

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

  render() {
    const {
      data, columns, page, rowsPerPage, testId, tooltipDetail, rowsPerPageOptions, ...rest
    } = this.props;

    const headerProps = {
      columns,
      testId,
      handleSort: this.handleSortClick,
      ...rest,
    };

    return (
      <TableWrapper>
        <Toolbar>
          <Typography>{this.props.title}</Typography>
        </Toolbar>
        <Table>
          <Head {...headerProps} />
          <TableBody>
            {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map((row, i) => (
              <TableRow
                hover
                onClick={this.handleClick(row.id)}
                key={row.id}
                data-testid={`${testId}-row${i}-${row.id}`}
              >
                {columns.map(column => (
                  <TableCell align={column.numeric ? 'right' : 'inherit'} key={column.id}>
                    {tooltipDetail[row[column.id]] ?
                      <ToolTip
                        title={tooltipDetail[row[column.id]]}
                        enterDelay={row[column.id]}
                        testId={`${testId}-tableHead-ToolTip`}
                      >
                        <Typography>{row[column.id]}</Typography>
                      </ToolTip> :
                      <Typography>{row[column.id]}</Typography>
                    }
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <TablePagination
          component="div"
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          rowsPerPageOptions={rowsPerPageOptions}
          ActionsComponent={<TablePaginationActions />}
        />
      </TableWrapper>
    );
  }
}

TableComponent.propTypes = {
  title: PropTypes.string.isRequired,
  testId: PropTypes.string.isRequired,
  data: tablePropType.data.for('columns').isRequired,
  columns: tablePropType.columns.for('data').isRequired,
  setState: PropTypes.func.isRequired,
  orderBy: PropTypes.string.isRequired,
  order: PropTypes.oneOf(['asc', 'desc']),
  onClick: PropTypes.func,
  page: PropTypes.number,
  rowsPerPage: PropTypes.number,
  tooltipDetail: PropTypes.shape({}),
};

TableComponent.defaultProps = {
  onClick: () => {},
  order: 'asc',
  page: 0,
  rowsPerPage: 25,
  tooltipDetail: {},
  rowsPerPageOptions: [25, 50, 100, 200],
};

export default TableComponent;

TablePaginationActions

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
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,
};

export default withStyles(actionsStyles, { withTheme: true })(TablePaginationActions);

Answer 1

发现错误。 input并没有以某种方式返回组件，但可能由于TablePaginationActions行而被视为函数。因此，在我的withStyles(actionsStyles, { withTheme: true })(TablePaginationActions);中，我不得不用TableComponent替换{< TablePaginationActions />}，问题解决了：）

Answer 2

TablePagination期望组件以ActionsComponent道具（see docs）的形式传递，但是您传递的是react element （这是由JSX语法<TablePaginationActions />）。

请阅读this article，以更好地理解这些术语之间的区别。

检查`TablePagination`的渲染方法

2 个答案: