React JS中如何同步更新两处Pagination的激活标签状态

嘿，这个场景太常见了——两个分页组件各管各的状态，导致点击其中一个时另一个完全没反应。核心解决思路其实很简单：让两个分页共享同一个页码状态源，而不是各自维护独立的状态。这样不管哪一处触发页码变更，状态更新都会同步到另一处。下面分不同技术栈给你具体的实现方案：

1. React 项目（函数组件 + Hooks） #

如果是React项目，用useState维护一个共享的页码状态，然后把状态和统一的变更处理函数传给两个分页组件就行：

import { useState } from 'react';
// 假设这是你的分页组件（或者第三方库的组件，比如AntD的Pagination）
import CustomPagination from './CustomPagination';

function PageWithDualPagination() {
  // 共享的当前页码状态
  const [currentPage, setCurrentPage] = useState(1);
  // 总页数根据你的实际数据设置
  const totalPages = 10;

  // 统一处理页码变更的函数
  const handlePageChange = (pageNum) => {
    setCurrentPage(pageNum);
    // 这里可以加你自己的逻辑，比如请求对应页码的数据
    fetchPageData(pageNum);
  };

  const fetchPageData = (page) => {
    console.log(`正在加载第 ${page} 页的数据...`);
    // 实际的API请求逻辑
  };

  return (
    <div className="page-container">
      {/* 顶部分页：接收共享状态和统一处理函数 */}
      <CustomPagination
        current={currentPage}
        onChange={handlePageChange}
        totalPages={totalPages}
      />

      {/* 中间的内容区域 */}
      <div className="content-area">
        {/* 你的页面内容 */}
      </div>

      {/* 底部分页：和顶部分页用完全一样的状态和处理函数 */}
      <CustomPagination
        current={currentPage}
        onChange={handlePageChange}
        totalPages={totalPages}
      />
    </div>
  );
}

不管你用的是自己封装的分页组件还是第三方库（比如Ant Design的Pagination），只要确保两个组件接收的current（激活页码）和onChange（页码变更回调）是同一个，就能实现同步更新。

2. Vue 项目（Vue 3 组合式API） #

Vue里用ref维护共享状态，借助双向绑定就能轻松实现同步：

<template>
  <div class="page-wrapper">
    <!-- 顶部分页 -->
    <el-pagination
      v-model:current-page="currentPage"
      :page-count="10"
      @current-change="onPageChange"
    />

    <!-- 内容区域 -->
    <div class="content">...</div>

    <!-- 底部分页：和顶部分页绑定同一个currentPage -->
    <el-pagination
      v-model:current-page="currentPage"
      :page-count="10"
      @current-change="onPageChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElPagination } from 'element-plus'; // 以Element Plus为例

// 共享的当前页码
const currentPage = ref(1);

const onPageChange = (page) => {
  console.log(`切换到第 ${page} 页`);
  // 这里添加数据加载逻辑
};
</script>

Vue的双向绑定会自动帮我们同步状态——只要任意一个分页的页码变化，currentPage就会更新，另一个分页也会自动切换激活状态。

3. 原生JavaScript项目 #

如果是纯原生JS项目，我们可以用一个全局状态变量，再写一个统一的更新函数来同步两个分页的激活样式：

<!-- 顶部分页 -->
<div class="pagination" id="top-pagination">
  <button class="page-item active">1</button>
  <button class="page-item">2</button>
  <button class="page-item">3</button>
  <button class="page-item">4</button>
</div>

<!-- 内容区域 -->
<div class="content">...</div>

<!-- 底部分页 -->
<div class="pagination" id="bottom-pagination">
  <button class="page-item active">1</button>
  <button class="page-item">2</button>
  <button class="page-item">3</button>
  <button class="page-item">4</button>
</div>

<script>
// 共享的当前页码状态
let currentActivePage = 1;
const totalPages = 4;

// 统一更新两个分页激活状态的函数
function syncPaginationActive(pageNum) {
  currentActivePage = pageNum;
  // 更新顶部分页的激活样式
  updatePaginationActive('#top-pagination', pageNum);
  // 更新底部分页的激活样式
  updatePaginationActive('#bottom-pagination', pageNum);
  // 加载对应页码的数据
  loadPageData(pageNum);
}

// 单个分页的激活状态更新函数
function updatePaginationActive(paginationSelector, activePage) {
  const pageItems = document.querySelectorAll(`${paginationSelector} .page-item`);
  pageItems.forEach(item => {
    item.classList.remove('active');
    if (parseInt(item.textContent) === activePage) {
      item.classList.add('active');
    }
  });
}

// 给所有分页按钮绑定点击事件
document.querySelectorAll('.page-item').forEach(item => {
  item.addEventListener('click', () => {
    const page = parseInt(item.textContent);
    syncPaginationActive(page);
  });
});

function loadPageData(page) {
  console.log(`加载第 ${page} 页的数据...`);
}
</script>

点击任意一个分页按钮，都会触发syncPaginationActive函数，同时更新两个分页的激活样式，完美解决不同步的问题。

核心总结 #

不管你用什么技术栈，核心逻辑都是避免让每个分页组件独立维护状态，而是让它们依赖同一个状态源。这样一处状态变更，所有依赖该状态的组件都会同步更新，从根源上解决激活状态不同步的问题。

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