React分页组件中如何设置Active类

嘿，这个问题其实很容易搞定，核心就是靠React的状态来跟踪当前选中的页码，然后动态给对应的<li>元素加上active类。我给你一步步拆解：

1. 给组件添加跟踪当前页码的状态 #

首先，你需要在组件的构造函数里初始化一个状态，用来保存当前选中的页码，比如默认选中第一页：

constructor(props) {
  super(props);
  this.state = {
    currentPage: 1 // 默认选中第一页
  };
  // 记得绑定handlePages方法，避免this指向问题
  this.handlePages = this.handlePages.bind(this);
}

2. 修改点击事件，更新当前页码状态 #

接下来调整handlePages方法，让它在点击页码时更新currentPage的状态。直接把页码作为参数传进去会比通过id获取更直观：

handlePages(pageNumber) {
  this.setState({
    currentPage: pageNumber
  });
  // 这里可以保留你原来的分页逻辑，比如更新列表数据之类的操作
}

对应的渲染部分，把onClick改成传参形式：

onClick={() => this.handlePages(number)}

3. 动态设置className，添加Active类 #

最后是关键一步：渲染每个页码<li>时，判断当前页码是否等于currentPage，相等就加上active类，否则只保留controls类。用模板字符串拼接最便捷：

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

这样一来，每当你点击不同页码，currentPage状态更新后组件会重新渲染，对应的页码自动加上active类，其他页码则移除该类，完美实现当前页码的高亮效果。

内容的提问来源于stack exchange，提问作者Neil