React 入门 以及使用antd框架，并且封装分页组件、使用表格分页

安装

安装React项目
npm i -g create-react-app
create-react-app demo (demo就是的项目名字)

Ant Design 框架的安装
npm install antd --save
找到APP.css 在最前面引入
@import '~antd/dist/antd.css';

主页面

import React from "react";
// 这是我自己请求的接口
import {allList} from '../../api/List';
// 这里是引入antd的ui框架，按需引入的
import { Paginationall } from '../Pagination/pagination'
// 这个是封装好的 列表 + 分页
import Newlist from './newList';
export default class List extends React.Component{
    // 构造函数
    constructor(props){
        super(props) // 继承父类属性
        // 这个类似于状态，可以进行传参
        this.state = {
            list: [],
            queryParmes: {}
        }
    }
    // 立即触发函数
    // 相当于vue的挂载
    componentDidMount(){
    	// 自动挂载一次
        this.new_List()
    }
    // 默认第一页
    new_List(page = 1){
        let queryParmes = {
            page: page,
            pageSize: 10,
            count: 0
        }
        let list = [];
        // 这里是我封装好的接口
        // 类似于vue对axios的封装一样
        allList(queryParmes).then((res) => {
            console.log(res);
            list = res.data
            queryParmes.count = res.count
            console.log(queryParmes);
            // 将数据存在状态中
            this.setState({list:list,queryParmes:queryParmes})
        })
    }
    render(){
        let title = '哈哈哈哈';
        return(
            <div>
                <p>我是List组件</p>
                <p>{title}</p>
                {/* 
                    list 将列表的数据传递给子组件
                    queryParmes 将我们请求api的参数也传递过去，方便弄分页
                    changeColor 是子组件传递回来的回调函数
                */}
                <Newlist list={this.state.list} queryParmes={this.state.queryParmes} changeColor={(page) => {this.new_List(page)}}/>
                // 这里调用的是封装好的分页组件
                <Paginationall queryParmes={this.state.queryParmes} changePagination={(page) => {this.new_List(page)}}></Paginationall>
            </div>
        );
    }
}

子组件

import React from "react";
import { Pagination, Table  } from 'antd';
export default class newList extends React.Component{
    // 构造函数
    constructor(props){
        // 继承
        super(props);
        this.state = {
        }
    }
    // 传递给父组件的回调事件
    handleChange(page){
        console.log(page);
        // 传递数据给父组件
        // 将分页的页数传递过去
        this.props.changeColor(page)
    }
    
    render(){
        return(
            <div>
                {
                    // 这里利用了对map对数组进行渲染
                    this.props.list.map(({id,name,img}) => {
                        return(
                            <ul key={id}>
                                <p>{name}</p>
                                <img src={img} alt="hhh"/>
                            </ul>
                        )
                    })
                }
                
            </div>
        )
    }
}

封装的分页组件

import React from "react";
import { Pagination } from 'antd';
export var Paginationall =  (props)=>{
    const handleChange = (page) => {
        // 回调函数
        props.changePagination(page)
    }
    return (
        <div>
            <Pagination
                // 传递过来的总数据
                total={props.queryParmes.count}
                // 这里是显示 多少条的
                showTotal={total => `Total ${total} items`}
                // 默认第一页
                defaultCurrent="1"
                // 默认一页十条数据
                defaultPageSiz="10"
                pageSize={props.queryParmes.pageSize??'10'}
                current={props.queryParmes.page}
                // 点击翻页的事件
                onChange={handleChange.bind(this)}
            />
        </div>
    )
}

第2种 直接引入antd的表格组件，这个组件有自带的分页
不过我们从后端返回来的数据需要全部的
表格默认是10条一页

// 还是父页面，List.js
import React from "react";
import {allList} from '../../api/List';
import { Paginationall } from '../Pagination/pagination'
import Newlist from './newList';
export default class List extends React.Component{
    // 构造函数
    constructor(props){
        super(props) // 继承父类属性
        this.state = {
            list: [],
            queryParmes: {}
        }
    }
     // 立即触发函数
    // 相当于vue的挂载
    componentDidMount(){
        this.new_List()
    }
    new_List(page = 1){

        // 这里不传递 pageSize 是为了配合 Table 表格组件的分页组件查询
        // 这里我要自己拿全部的数据
        let queryParmes = {
            page: page,
            count: 0
        }
        let list = [];
        allList(queryParmes).then((res) => {
            console.log(res);
            list = res.data
            queryParmes.count = res.count
            console.log(queryParmes);
            this.setState({list:list,queryParmes:queryParmes})
        })
    }
    render(){
        let title = '哈哈哈哈';
        return(
            <div>
                <p>我是List组件</p>
                <p>{title}</p>
                {/* 
                    list 将列表的数据传递给子组件
                    queryParmes 将我们请求api的参数也传递过去，方便弄分页
                */}
                {/* 直接使用andt的表格 */}
                <Newlist list={this.state.list} queryParmes={this.state.queryParmes}/>
            </div>
        );
    }
}

	// 子页面
import React from "react";
import { Pagination, Table  } from 'antd';
export default class newList extends React.Component{
    // 构造函数
    constructor(props){
        // 继承
        super(props);
        this.state = {
        }
    }
	// 这里我利用函数的方式返回数组
    columnsList(){
        return [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                // render: id => <a >{id}</a>,
            },
            {
                title: 'name',
                dataIndex: 'name',
                key: 'name',
                // render: name => <a>{name}</a>,
            },
            {
                title: 'img',
                dataIndex: 'img',
                key: 'img',
                // render: img => <a>{img}</a>,
            }
        ]
    }
    
    render(){
        return(
            <div>
                {/* 
                    columns： 为首列的提示信息,对应的是你要展示的是什么，有几列
                    rowKey: 给每个都一行都绑定唯一的key值
                    dataSource： 是数据
                */}
                <Table columns={this.columnsList()} rowKey={record => record.id} dataSource={this.props.list} />
            </div>
        )
    }
}

看一下效果

以上只是我在学习中自己对react的理解，欢迎大家给予评论