React/Next.js中基于索引为react-tables分页按钮设置激活类问题

问题原因 #

你当前使用单个布尔类型的isActive状态控制所有分页按钮的激活样式，所有按钮共用同一个状态判断规则，所以只要状态变更，所有按钮的样式都会同步变化。

修复方案 #

将状态改为存储当前激活的页码索引，点击时将对应页码的索引存入状态，判断样式时匹配当前按钮的索引和存储的激活索引即可：

// 初始值设为0，对应默认第一页激活
const [activePageIndex, setActivePageIndex] = useState(0);

<div className={styles.pagination}>
    {pageOptions.map((option, i) => (
        <button
          onClick={() => {
              gotoPage(i);
              setActivePageIndex(i);
          }}
          key={i}
          // 只有当前按钮索引和激活索引一致时才加激活类
          className={activePageIndex === i ? styles.active : ""}
        >
            {option + 1}
        </button>
    ))}{" "}
</div>

优化建议 #

如果你使用的是react-table的官方实例，可以直接读取实例上自带的pageIndex状态（调用useReactTable返回的实例对象的state属性下的字段），不需要自己额外维护激活页码状态，避免出现跳转页码和激活样式不同步的问题。

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