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