React中的分頁活動課程

Question

我進行了分頁，一切正常，但是我不知道如何在單個頁面上設置活動類。

這是我的示例：

分頁代碼：

    const renderPagination = numbers.map(number => {
        return (
            <li className="controls" key={number} id={number} onClick={this.handlePages}>
                {number}
            </li>
        );
    });

完整示例：

碼筆

Answer 1

<li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'} key={number} id={number} onClick={this.handlePages}>
  {number}
</li>

您可以在狀態等於數字時添加類

https://codepen.io/titan_dl_1904/pen/XYbjye

Answer 2

由於currentPage處於狀態，因此您可以從那里獲取它，並將其與您顯示的頁面鏈接number進行比較

    const renderPagination = numbers.map(number => {
        var activeClass = this.state.currentPage === number ? 'active' : '';
        return (
            <li className={`controls ${activeClass}`} key={number} id={number} onClick={this.handlePages}>
                {number}
            </li>
        );
    });

更新了演示（也帶有一些樣式 ）： https : //codepen.io/gpetrioli/pen/MXwbYv