React.js中如何根据产品分类实现动态导航栏渲染

核心思路是把导航项的名称、跳转地址等属性抽离为统一结构的数据源，通过遍历数据源渲染DOM结构。后续新增、修改分类时只需要调整数据源即可，不需要改动导航的JSX结构代码，后续对接API时只要把本地数据源替换为接口返回的格式化数据，渲染逻辑完全不需要改动。

具体实现步骤 #

1. 定义统一结构的导航数据源 #

如果暂时还没对接API，可以先在本地维护导航配置数组，每个导航项包含唯一标识、显示名称、跳转路径三个核心字段，后续新增分类只要在数组里加对应对象即可：

// 导航数据源，后续对接API时可直接替换为接口返回的格式化结果
const navList = [
  { id: 'women', name: 'Women', path: '/women' },
  { id: 'men', name: 'Men', path: '/men' },
  { id: 'kids', name: 'Kids', path: '/kids' },
  // 后续新增分类直接在这里追加配置即可，比如加配饰分类：
  // { id: 'accessories', name: 'Accessories', path: '/accessories' }
]

2. 遍历数据源动态渲染导航项 #

用数组的map方法遍历生成导航DOM，同时把原本硬编码的激活状态判断改成动态匹配逻辑，不要手动给固定项加is_active类名：

import { useState } from 'react'
// 样式引入逻辑和你原有代码保持一致即可

function Nav() {
  // 存储当前激活的导航id，默认选中Women，和你原有默认激活状态对齐
  const [activeNav, setActiveNav] = useState('women')

  return (
    <nav>
      <ul className={style.navContainer}>
        {navList.map(navItem => (
          <li key={navItem.id} className={style.navContainer__list}>
            <a
              // 动态拼接类名：只有当前遍历项和激活id匹配时才加激活样式
              className={`${style.navContainer__list__item} ${activeNav === navItem.id ? style.is_active : ''}`}
              href={navItem.path}
              onClick={() => setActiveNav(navItem.id)}
            >
              {navItem.name}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

export default Nav

后续对接API的调整方式 #

等需要从接口拉取分类数据时，只需要新增接口请求逻辑，把返回的分类数据格式化成和本地navList一致的结构即可，渲染层的代码完全不需要修改：

import { useState, useEffect } from 'react'

function Nav() {
  const [navList, setNavList] = useState([])
  const [activeNav, setActiveNav] = useState('')

  // 组件挂载时请求分类接口
  useEffect(() => {
    const fetchCategoryList = async () => {
      // 替换成你项目实际的接口请求逻辑
      const res = await fetch('/api/category/list')
      const rawData = await res.json()
      // 把接口返回数据格式化为渲染需要的字段结构
      const formattedNavList = rawData.map(item => ({
        id: item.categoryId,
        name: item.categoryName,
        path: `/category/${item.categoryId}`
      }))
      setNavList(formattedNavList)
      // 默认选中第一个分类
      if(formattedNavList.length) setActiveNav(formattedNavList[0].id)
    }
    fetchCategoryList()
  }, [])

  return (
    // 下方渲染逻辑和之前完全一致，不需要改动
    <nav>
      <ul className={style.navContainer}>
        {navList.map(navItem => (
          <li key={navItem.id} className={style.navContainer__list}>
            <a
              className={`${style.navContainer__list__item} ${activeNav === navItem.id ? style.is_active : ''}`}
              href={navItem.path}
              onClick={() => setActiveNav(navItem.id)}
            >
              {navItem.name}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

注意事项 #

• 遍历渲染列表时必须给最外层元素加唯一的key属性，不要用数组下标作为key，用每个分类的唯一id即可，避免React渲染出现状态错乱问题
• 如果项目使用了React Router等路由库，可以把激活状态和当前路由绑定，不需要单独维护activeNav状态，自动匹配当前路由对应的导航项加激活样式即可
• 不管后续调整分类名称、跳转路径还是新增、删除分类，都只需要修改数据源，不需要改动导航结构代码，维护成本会大幅降低

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