React组件间状态值传递实现动态分类标签页功能

步骤1：将状态提升到父组件Portfolio #

子组件Buttons的选中状态需要和父组件共享，所以把tab状态从Buttons移到Portfolio中，同时把切换状态的方法通过props传递给Buttons。

步骤2：修改Buttons组件 #

• 接收父组件传来的activeTab（当前选中分类）和onTabChange（切换分类的方法）
• 先从数据源中提取唯一的分类值，避免重复渲染相同分类的按钮
• 渲染按钮时，判断当前按钮的分类是否与activeTab一致，动态添加active类名
• 点击按钮时调用onTabChange传递对应分类值

修改后的Buttons代码：

// 导入数据源（根据实际路径调整）
import data from './your-data-source';

// 提取唯一分类，避免重复按钮
const uniqueCategories = [...new Set(data.map(item => item.category))];

export default function Buttons({ activeTab, onTabChange }) {
  return (
    <>
      <span 
        className={activeTab === "all" ? "active" : ""}
        onClick={() => onTabChange("all")}
      >
        All
      </span>
      {uniqueCategories.map((category, index) => (
        <span 
          key={index} 
          className={activeTab === category ? "active" : ""}
          onClick={() => onTabChange(category)}
        >
          {category}
        </span>
      ))}
    </>
  );
}

步骤3：修改Portfolio组件 #

• 维护activeTab状态，初始值设为"all"
• 根据activeTab动态过滤数据：选中"all"时返回全部数据，否则筛选对应category的项
• 将activeTab和切换方法setActiveTab传给Buttons组件

修改后的Portfolio代码：

import { useState } from 'react';
import Buttons from './Buttons';
import ProfileBox from './ProfileBox';
// 导入样式组件和数据源（根据实际路径调整）
import { PortfolioWrapper, ProfileContainer } from './styles';
import data from './your-data-source';

export default function Portfolio() {
  const [activeTab, setActiveTab] = useState("all");

  // 动态过滤数据逻辑
  const filteredData = activeTab === "all" 
    ? data 
    : data.filter(profile => profile.category === activeTab);

  return (
    <div id='profile'>
      <PortfolioWrapper>
        <Buttons 
          activeTab={activeTab} 
          onTabChange={setActiveTab} 
        />
        <ProfileContainer>
          {filteredData.map((item) => (
            <ProfileBox 
              key={item.id}
              title={item.title}
              info={item.info}
              pic={item.pic}
            />
          ))}
        </ProfileContainer>
      </PortfolioWrapper>
    </div>
  );
}

额外说明 #

• 原Buttons代码中直接传递item对象的逻辑有误，现在改为传递category字符串，确保过滤逻辑匹配
• 用new Set处理分类去重，避免同一个分类重复渲染按钮
• 按钮的active类名会根据当前选中状态动态切换，实现选中项的视觉反馈

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