<React/tailwind>具有z-index遞減/渲染順序的映射物件

我的導航條碼

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=" 具有 z-index 遞減/渲染順序的映射物件"
    />
  ) : (
    <img
      onClick={() => setShowSidebar(!showSidebar)}
      className="fixed z-30 flex items-center cursor-pointer left-5 top-5"
      src={ham}
      width="40px"
      alt=" 具有 z-index 遞減/渲染順序的映射物件"
    />
  )}
<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。

uj5u.com熱心網友回復：

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

<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陣列的第二個引數是索引。如果這不是你要找的，請告訴我。

標籤：javascript 反应 反应式 反应 CSS 模块

上一篇：反應原生不能使用渲染項

下一篇：如何在react-native或reactjs中維護reactusestate中的先前資料和當前資料？