@material-ui/core/Table
在反应中呈现完美,但是添加TablePagination
时出现错误:
Uncaught TypeError: Cannot read property '@global' of undefined
at handleNestedGlobalContainerRule (index.js?1115:125)
...
当存在TablePagination
元素时,下面的代码将引发错误,但是如果从TableFooter
中删除则可以使用:
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {withStyles} from 'material-ui/styles'
import Typography from 'material-ui/Typography'
import GridList, { GridListTile, GridListTileBar } from 'material-ui/GridList'
import {Link} from 'react-router-dom'
import AddToCart from '../cart/AddToCart'
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 TableFooter from '@material-ui/core/TableFooter';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
background: theme.palette.background.paper,
textAlign: 'left',
padding: '0 8px'
},
container: {
minWidth: '100%',
paddingBottom: '14px'
},
title: {
padding:`${theme.spacing.unit * 3}px ${theme.spacing.unit * 2.5}px ${theme.spacing.unit * 2}px`,
color: theme.palette.openTitle,
width: '100%'
},
table: {
width: '100%'
},
tableRow: {
fontSize:'1em'
},
cellShort: {
padding: '4px 4px 4px 4px!important'
},
cartStyle: {
width: '20px', height: '20px'
}
})
class ProductsView extends Component {
state = {
order: 'asc',
orderBy: 'ServiceName',
selected: [],
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, order, orderBy, selected, rowsPerPage, page } = this.state;
return (
<div className={classes.root}>
{this.props.products.length > 0 ?
(<div className={classes.container}>
<Table className={classes.table} >
<TableHead>
<TableRow>
<TableCell className={classes.cellShort}>SKU</TableCell>
<TableCell className={classes.cellShort}>ServiceName</TableCell>
<TableCell className={classes.cellShort} numeric>NumPacks</TableCell>
<TableCell className={classes.cellShort}>Format</TableCell>
<TableCell className={classes.cellShort}>Unit</TableCell>
<TableCell className={classes.cellShort} numeric>Price</TableCell>
<TableCell className={classes.cellShort}></TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.products.map((product, i) => (
<TableRow key={i} className={classes.tableRow}>
<TableCell component="th" scope="row" className={classes.cellShort}>
<Link to={"/product/"+product._id}>{product.ProductCode}</Link>
</TableCell>
<TableCell className={classes.cellShort}>{product.ServiceName}</TableCell>
<TableCell className={classes.cellShort} numeric>{product.NumPacks}</TableCell>
<TableCell className={classes.cellShort}>{product.Format}</TableCell>
<TableCell className={classes.cellShort}>{product.unit}</TableCell>
<TableCell className={classes.cellShort} numeric>{product.price}</TableCell>
<TableCell className={classes.cellShort}><AddToCart item={product} cartStyle={classes.cartStyle}/></TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
colSpan={6}
component="div"
count={this.props.products.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
/>
</TableRow>
</TableFooter>
</Table> </div> ) : this.props.searched && (<Typography type="subheading" component="h4" className={classes.title}>No products found! :(</Typography>)}
</div> )
}
}
ProductsView.propTypes = {
classes: PropTypes.object.isRequired,
products: PropTypes.array.isRequired,
searched: PropTypes.bool.isRequired
}
export default withStyles(styles)(ProductsView)
我尝试了TablePagination元素的放置的多种组合,以及count
,rowsPerPage
和page
的硬编码值。
我不确定哪个@global属性试图读取哪个未定义。该错误可能与容器有关或与样式有关,可以同时使用material-ui和@ material-ui吗?