React+Tailwind map渲染导航列表实现z-index递减方案

问题场景 #

• 开发响应式侧边导航栏时，逐行手写<li>标签，依次配置从z-50到z-10递减的z-index工具类，可以正常实现预期的3D堆叠视觉效果
• 为精简代码改用Array.map()方法批量遍历菜单项数组渲染列表时，尝试通过声明ZLevel状态变量、配合自定义ZChange()函数动态拼接z-index类名，触发React运行时报错：

Too many re-renders. React limits the number of renders to prevent an infinite loop

触发该报错的核心原因：如果在组件渲染的主流程中直接调用状态更新函数，会形成「渲染→状态更新→触发重渲染」的死循环，这类静态规则的类名计算完全不需要借助状态能力实现。

可行实现方案 #

方案1：遍历渲染时直接计算拼接z-index类名 #

不需要额外声明状态、编写层级修改函数，直接在map遍历过程中通过模板字符串计算生成对应z-index类名即可，示例代码：

// 菜单项示例，每项需保证有唯一的id标识
const menuItems = [
  {id: 1, name: '首页'},
  {id: 2, name: '文章'},
  {id: 3, name: '分类'},
  {id: 4, name: '关于'},
  {id: 5, name: '设置'},
]

export default function Sidebar() {
  return (
    <ul className="w-64">
      {menuItems.map(item => (
        <li 
          key={item.id}
          // 按id倒序生成z-50到z-10的递减层级
          className={`z-${(menuItems.length - item.id)*10} p-4 bg-white shadow rounded-lg -mb-2`}
        >
          {item.name}
        </li>
      ))}
    </ul>
  )
}

注意：如果Tailwind开启了严格的内容扫描模式，动态拼接的类名可能会被构建工具tree-shake剔除导致样式不生效，这种场景推荐使用下面的无z-index方案。

方案2：利用DOM原生堆叠规则实现（推荐） #

排查z-index样式不生效问题时可以发现，DOM默认的堆叠规则为先渲染的元素默认位于堆叠层级底部，基于这个规则完全不需要手动配置z-index，仅需两步即可实现相同的堆叠效果：

• 调整菜单项数组的遍历顺序，按原顺序的倒序渲染
• 给外层<ul>标签添加flex flex-col-reverse类名，把视觉展示顺序翻转回正常顺序
  该写法彻底规避了动态Tailwind类名被剔除、z-index层级冲突的问题，代码更简洁，维护成本更低。

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