我想要做的是在First Page的Last Page中添加TablePagination，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);
发现错误。不知何故，TablePaginationActions没有返回组件，但被视为可能由于withStyles(actionsStyles, { withTheme: true })(TablePaginationActions);线的功能。所以在我的TableComponent我不得不用{< TablePaginationActions />}替换{TablePaginationActions}并且问题解决了:)
TablePagination期望一个组件作为ActionsComponent prop（see docs）传递，但你传递的是反应元素（这是由JSX语法<TablePaginationActions />返回的）。
请阅读this article以更好地理解这些术语之间的区别。