react+materialUI完成自己的翻页组件

material是不带翻页工具的，这一点相比较antd还是有一些鸡肋。

所以楼主简单封装了一个翻页组件，话不多说。上代码


import React from "react";
import ChevronLeft from &＃39;material-ui/svg-icons/navigation/chevron-left&＃39;;
import ChevronRight from &＃39;material-ui/svg-icons/navigation/chevron-right&＃39;;
import {FlatButton, Toolbar, ToolbarGroup} from "material-ui";class Pagination extends React.Component {constructor(props) {super(props);this.state = {page: 1}}setPage(page) {this.setState({page},()=>{this.props.onChange(page)})}render() {const {total} = this.props;const {page} = this.state;const allPage = Math.ceil(total / 10) || 1;return (allPage > 1 &&

最终效果图

具体使用

import Pagination from &＃39;Pagination&＃39;

this.onChange(page)}>

导入组件后，传入total参数和onChange回调函数就可以进行使用啦。