<React/tailwind>具有 z-index 遞減/渲染順序的地圖對象

Question

我的導航條碼

import React, { useLayoutEffect, useState } from "react";
import { useQuery,useMutation } from "../../../convex/_generated";
import { Link } from "react-router-dom";
import _function from "../../function";
import { Menu } from "../../model";
import ham from "../../assets/ham.svg";
import close from "../../assets/close.svg";
import "./nav.css";

const Nav = () => {

  let {windowSize} = _function();

  const [showSidebar, setShowSidebar] = useState(false);

  const list : {id:number, display: string, url: string, picurl: string }[]= [
    Menu(1,"Home","/",ham),
    Menu(2,"About","/about",ham),
    Menu(3,"Skill","/skills",ham),
    Menu(4,"Work","/works",ham),
    Menu(5,"Contact","/contact",ham)
];

  function navContentSwitch(text:string,url:string) { 
    return windowSize() >= 640 ? text : (<img
    width="20px"
    alt="smallicon"
    src={url}
  />) ;
  };

  return <nav>
  {showSidebar ? (
    <img
      className="flex z-30 items-center fixed left-5 top-5"
      onClick={() => setShowSidebar(!showSidebar)}
      src={close}
      width="50px"
      alt=""
    />
  ) : (
    <img
      onClick={() => setShowSidebar(!showSidebar)}
      className="fixed z-30 flex items-center cursor-pointer left-5 top-5"
      src={ham}
      width="40px"
      alt=""
    />
  )}
<div className="top-0 left-0 text-white fixed h-full z-40">
  <nav
    className={`z-50 fixed top-2/4 -translate-y-[calc(50%+3vh)] ${
      showSidebar ? "block" : "hidden"
    }`}
  >
    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li id="listmenu" className="btn3d-li z-10">{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>
  </nav>
</div>
</nav>
};

export default Nav;

問題是 z-index 必須從 z-50 減少到 z-10。 我在地圖之前的代碼

<ul className=" ">
  <Link key={list[0].id} className="btn3d-a glow" to={list[0].url}>
    <li id="listmenu" className="btn3d-li z-50">
      {navContentSwitch(list[0].display, list[0].picurl)}
    </li>
  </Link>
  <Link key={list[1].id} className="btn3d-a glow" to={list[1].url}>
    <li id="listmenu" className="btn3d-li z-40">
      {navContentSwitch(list[1].display, list[1].picurl)}
    </li>
  </Link>
  <Link key={list[2].id} className="btn3d-a glow" to={list[2].url}>
    <li id="listmenu" className="btn3d-li z-30">
      {navContentSwitch(list[2].display, list[2].picurl)}
    </li>
  </Link>
  <Link key={list[3].id} className="btn3d-a glow" to={list[3].url}>
    <li id="listmenu" className="btn3d-li z-20">
      {navContentSwitch(list[3].display, list[3].picurl)}
    </li>
  </Link>
  <Link key={list[4].id} className="btn3d-a glow" to={list[4].url}>
    <li id="listmenu" className="btn3d-li z-10">
      {navContentSwitch(list[4].display, list[4].picurl)}
    </li>
  </Link>
</ul>;

我試着用這種方式寫類名

    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li id="listmenu" className={`btn3d-li ${<--do something-->}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>

在“做某事”部分。 我用附加函數聲明 ZLevel 狀態以返回字符串 (z-50 ...) 並在其中寫入

• ZLevel && ZChange()
• 變化（）

我收到此錯誤（“重新渲染太多。React 限制渲染數量以防止無限循環”）。 有沒有辦法做 z-index 增量或這樣做的正確方法是什么。

我是反應初學者，所以任何建議將不勝感激。

Zachiah Advice 中的正確代碼

    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li className={`btn3d-li z-${(list.length - item.id)*10}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>

Zachiah建議后的附加信息我發現，當上傳到主機 z-index 時即使它在部署之前工作正常，它仍然無法正常工作。我通過以下方式了解這一點： 是否可以使用 CSS3 更改列表項的順序？ ： https ://coder-coder.com/z-index-isnt-working/ 這意味着在底部渲染的第一個堆棧。

因此，為了使第一個菜單最后渲染，只需翻轉一個列表位置

  //by order of apperance affect z-index ***firstmenu = last in list***
  const list: {display: string; url: string; picurl: string }[] = [
    Menu("Contact", "/contact", "fa-solid fa-address-book"),
    Menu("Work", "/works", "fa-solid fa-laptop-file"),
    Menu("Skill", "/skills", "fa-solid fa-user-gear"),
    Menu("About", "/about", "fa-solid fa-address-card"),
    Menu("Home", "/", "fa-solid fa-house-chimney")
  ];

並像這樣重寫 ul 列表映射。

<ul className="flex flex-col-reverse">
  {list.map((item, index) => {
    return (
      <Link key={index} className="btn3d-a glow" to={item.url}>
        <li className="btn3d-li">
          {navContentSwitch(item.display, item.picurl)}
        </li>
      </Link>
    );
  })}
</ul>; 

像這樣更干凈，根本不需要 z-index。

Answer 1

如果我沒記錯的話，你想做的就是：

<ul className=" ">
  {list.map((item, index) => (
      <Link key={item.id} className="btn3d-a glow" to={item.url}>
          <li id="listmenu" className={`btn3d-li z-${(list.length - index) * 10}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>
  )}
</ul>

請注意，數組上.map的第二個參數是索引。 如果這不是你要找的，請告訴我。