如何利用useContext复用React组件实现作品分类展示？

1. 用useContext管理全局状态完全可行 #

• 先创建WorkContext，定义好状态结构：包含当前选中的分类（'web'/'design'）、两类作品数据，以及切换分类的方法。
• 把你的Web项目和设计作品整理成结构完全统一的数据数组，比如每个作品项都包含id、title、desc、previewImg、tags这些字段，只是填充对应类别的内容，这样组件能直接复用。
• 在根组件（比如App.jsx）中用WorkContext.Provider包裹整个应用，把状态和方法传递下去。

2. 复用现有组件的核心思路 #

• 把你现在展示Web作品的组件（比如ProjectList、ProjectCard）改成无状态/少状态的纯展示组件，要么从Context中读取当前分类对应的作品数据，要么通过props接收统一格式的作品列表。
• 做一个分类切换控件（比如导航栏按钮、tab标签），点击时调用Context里的切换方法，更新全局的分类状态，组件会自动重新渲染对应类别的内容。

3. 可选优化细节 #

• 把两类作品数据单独抽离到一个配置文件（比如worksData.js），方便后续维护：

  export const worksData = {
    web: [
      { id: 1, title: "XX项目", desc: "基于React的单页应用", previewImg: "/images/web1.png", tags: ["React", "CSS"] },
      // 更多Web项目
    ],
    design: [
      { id: 1, title: "XX海报设计", desc: "品牌宣传海报", previewImg: "/images/design1.png", tags: ["PS", "平面设计"] },
      // 更多设计作品
    ]
  }
  

• 如果需要支持浏览器刷新保留当前分类，可以结合react-router，把分类作为路由参数（比如/portfolio/web），切换分类时同步更新路由和Context状态。

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