使用自定义分页操作在类组件上实现Material UI表

Question

我想在类组件上使用MATERIAL-UI表。在官方文档中，它是一个功能组件。我看了很多教程，但无论在哪里，它都是一个功能组件。这就是为什么我面临许多问题，比如不能在类组件中调用react钩子等。

我想在类组件上使用MATERIAL-UI表。

我正在尝试添加一个MATERIAL-UI表，它有一些自定义操作，比如更改每页的行数&转到下一页还是上一页？在MATERIAL-UI的官方文档中，有一个类似这样的表，其中包含一些自定义操作。

有线索吗。

代码沙盒：https://codesandbox.io/s/great-ardinghelli-m6puh?file=/src/Company.js

Answer 1

以下是如何使用类组件创建Material UI表的示例

class Company extends Component {
render() {
const classes = this.props;
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat&nbsp;(g)</TableCell>
<TableCell align="right">Carbs&nbsp;(g)</TableCell>
<TableCell align="right">Protein&nbsp;(g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
}
export default withStyles(styles, { withTheme: true })(Company);

演示