React 前台分页

/**

• Created by mashroom on 6/7/2018.
  */
  import React, { Component } from 'react';
  import { List, Avatar , Row, Col, Checkbox, Button,message,Pagination } from 'antd';
  import PageHeaderLayout from '../../layout/PageHeaderLayout';
  import styles from './index.less';
  import {global} from "../../constants/global";
  const {IME_EDITOR_URL} = global;
  class Search extends Component {
  state = {
  current: 1, //当前页码,
  pageSize:3 //每页显示条数
  }
  componentDidMount() {

  }
  onChangePage = (page) => {
  this.setState({
  current: page,
  });
  }

  render() {
  //ajax 获取的数据
  const data = [
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 1',
  content:"Ant Design, a design language for background applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 2',
  content:"Ant Design, a design language for background applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 3',
  content:"Ant Design, a design language for background applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 4',
  content:"Ant Design, a design language for <span style='color:red'>background</span> applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 3',
  content:"Ant Design, a design language for background applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 5',
  content:"Ant Design, a design language for <span style='color:red'>background</span> applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 6',
  content:"Ant Design, a design language for background applications, is refined by Ant UED Team"
  },
  {
  oid:"com.megalink.ime.model.part.Part:1",
  title: 'Ant Design Title 8',
  content:"Ant Design, a design language for <span style='color:red'>background</span> applications, is refined by Ant UED Team"
  },
  ];
  //
  return (
  <PageHeaderLayout>
  <div className={styles.standardList} >
  <Row gutter={16} style={{background:'white'}}>
  <Col className="gutter-row" md={24}>
  <div className="gutter-box">
  <List
  itemLayout="horizontal"
  dataSource={data.slice((this.state.current-1)this.state.pageSize,(this.state.current-1)this.state.pageSize+this.state.pageSize)}
  renderItem={item => (
  <List.Item>
  <List.Item.Meta
  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
  title={<a href={IME_EDITOR_URL + item.oid}>{item.title}</a>}
  description={<div dangerouslySetInnerHTML={{ __html: item.content }}/>}
  />
  </List.Item>
  )}
  />
  {/分页目录/}
  <div className={styles.pagination}>
  <Pagination
  defaultCurrent={1}
  current={this.state.current}
  total={data.length}
  defaultPageSize={this.state.pageSize}
  onChange={this.onChangePage}
  showTotal={(e)=>{return "共 "+e+" 条"}}
  />
  </div>

                        </div>
                    </Col>
                </Row>
            </div>
        </PageHeaderLayout>
    )
}

}

export default Search;