は私が反応して、カスタムページネーションを作成した要素の変更クラスのonClick

Question

リアクト： 私は基本的にデータを受信した場合にのみ表示されますコンテナページネーションを持っている：

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

これは、呼び出される関数ですページネーションの項目がクリックされた：

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; 

：

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) 
    } 

そしてここでは、実際のページネーションのコンポーネントです

すべてが期待通りに機能します。今度は、ページ分類アイテムをクリックしてクラスをpage-itemからpage-item-activeに変更し、以前クリックしたアイテムからactive partを削除したいと思います。どのように私はこれをリアクションで行うことができますか？私は州を設定することができますが、各ページ番号の州を愚かにすることを知っています。

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> 
); 
}