react实现分页，详细步骤

    今天给大家分享一个react实现分页的详细步骤，具体如下：

1，在state里面定义 数据集 ，每页显示的第一个和最后一个

this.state = {

            //数据集

datasetList: [],

minValue:0,

            maxValue:44,

        };

2，跳转页面后你的第一个数据的id和最后一个数据的id ，这里每页显示10条数据

handleValue = value =>{

//value分页id

    console.log(value)

//分页小于等于1就是第一页没变

    if(value<=1){

        this.setState({

            minValue:0,

            maxValue:10,

        });

    }else {

        this.setState({

            minValue:(value-1)*10,

            maxValue:(value-1)*10+10

        });

    }

};,

3，展示，下面是我展示图片是的代码片段（用map遍历，数据集使用slice（第一个id，最后一个id）来获取数据的）

 <Row >

                {this.state.datasetList.slice(this.state.minValue,this.state.maxValue).map(item =>(

                     <Card.Grid

                        style={gridStyle}

                    >

                        <Image 

                            style={{width:"100px",minHeight:"100px",maxHeight:"100px"}}

                            alt="example"

                            src={item.fileUrl}

                        />

                        <p style={{width:"100px",minHeight:"20px",maxHeight:"20px"}}>

                            <Typography.Paragraph

ellipsis={{ tooltip: item.fileName }}

style={{ marginBottom: '1px' }}>

{item.fileName}

</Typography.Paragraph>

                        </p> 

 

                    </Card.Grid>

                   

                ))}

  </Row><br/>

4，分页

 <Pagination 

//当前页数

        defaultCurrent={1} 

//每页条数

        defaultPageSize={10} 

//数据总数

        total={this.state.datasetList.length} 

        onChange={this.handleValue} >

</Pagination>

    这样就可以实现分页功能了，各位程序员同学们都学会了吗，还有不懂的可以在评论区留言讨论~