Question

我在React中创建了一个自定义分页：我基本上在容器分页中只有在收到数据时才能看到：

...
    {this.state.displayTweets.length != 0 && <Pagination pageCount={this.state.pageCount} pagination={this.pagination.bind(this)}/>}
...

这是单击分页项时调用的函数：

pagination(data){
        if(data == -1 && offset>0){
            console.log("Previous")
            offset -= perPage
            this.setState({displayTweets: this.state.tweets.slice(offset,offset+perPage)})
        } else if(data == 0 && pageNumber < this.state.pageCount) {
            console.log("Next")
            pageNumber += 1
            offset += perPage
            this.setState({displayTweets: this.state.tweets.slice(offset,offset+perPage)});
        } else if(data > 0 && data < this.state.pageCount){
            console.log("Between")
            pageNumber = data
            offset = perPage*(data-1)
            this.setState({displayTweets: this.state.tweets.slice(offset,perPage*data)});
        }
        console.log("Page number: "+pageNumber)
        console.log("Offset: "+offset)
    }

这是实际的分页组件：

import React from 'react';

const PageLi = (props) => {
    let pages = [];
    for (let i = 1; i <= props.pageCount; i++) {
        pages.push(<li className="page-item" onClick={() => { props.pagination(i)}} key={i}><a className="page-link">{i}</a></li>);
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                <li className="page-item" onClick={() => { props.pagination(-1)}}><a className="page-link">Previous</a></li>
                {pages}
                <li className="page-item"><a onClick={() => { props.pagination(0)}} className="page-link">Next</a></li>
            </ul>
        </nav>
    );
};

export default PageLi;

一切都按预期工作。现在，当我点击分页项目将类从page-item更改为page-item-active并从之前单击的active part中删除时，我希望这样。我怎么能在React中做到这一点？我知道我可以设置状态，但每个页码的状态都是愚蠢的。

Answer 1

您也可以在您的州内存储和维护当前页码，然后将其作为道具传递给PageLi组件。然后，您可以执行以下操作，根据当前页码更改类。

let pages = [];
for (let i = 1; i <= props.pageCount; i++) {
  pages.push(
    <li
      className={i === props.pageNumber ? "page-item-active" : "page-item"}
      onClick={() => {
        props.pagination(i);
      }}
      key={i}
    >
      <a className="page-link">{i}</a>
    </li>
  );
}

React元素更改类onClick

1 个答案: