react--antd中文格式

1. 安装antd
2. main.js中引入css和zhCN

import 'antd/dist/antd.min.css';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import 'moment/locale/zh-cn';

3. 全局包裹ConfigProvider

ReactDOM.render(
    <ConfigProvider locale={zhCN}>
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Suspense fallback={Loading}>
                    <Switch>
                        <Route exact path={'/login'} component={LoginScope}/>
                        <Route path={'/'} component={MainScope}/>
                    </Switch>
                </Suspense>
            </ConnectedRouter>
        </Provider>
    </ConfigProvider>, document.getElementById('root')
);

4. 组件全局引入，不能单独引入

import React,{Component} from 'react'
// import Pagination from 'antd/lib/pagination' //单独引入了
import { Pagination } from 'antd' 
import './index.scss'

5. 案例

 <div className='lzc-miniPageRule' style={styleCss}>
    <Pagination 
        size="small" 
        pageSizeOptions={pageSizeOptions}
        defaultPageSize={pageInfo.pageSize}
        current={pageInfo.currentPage}
        total={pageInfo.totalRecords}
        pageSize={pageInfo.pageSize}
        onChange={this.onChange}
        onShowSizeChange={this.onShowSizeChange}
        showSizeChanger
    />
</div>

 onChange = (page, pageSize) => {
    this.props.handlersearchData({
        currentPage: page,
        pageSize: pageSize,
    })
}

onShowSizeChange = (currentPage, pageSize) => {
    this.props.handlersearchData({
        currentPage: currentPage,
        pageSize: pageSize,
    })
}