如何用不同的 zIndex 映射数组 react.js 中的每个元素

Question

我想为每个元素映射一个具有不同 z 索引的数组。我该怎么做？我应该在三元内写吗？或任何其他选择？请帮忙。这是我的代码：

 {loading && error ? (
  <div> Loading Bro </div>
) : (
  boards.map((board, index) => (
         <img
                  className={style.todo_profile_picture_top}
                  style={{
                    right: `100px - ${index} * 20`,
                    zIndex: {10 - index},
                  }}
                  src={pp1}
                  alt="profile"
                />
   )) 
)}

Answer 1

尝试这样的事情

boards.map((board, index) => (
    <img
       key={index}
       className={style.todo_profile_picture_top}
       style={{
           right: `100px - ${index} * 20`,
           zIndex: {10 - index},
       }}
       src={pp1}
       alt="profile"
    />
)

Answer 2

你的想法似乎是正确的，但你需要检查一下语法。

 {loading && error ? (
  <div> Loading Bro </div>
) : (
  boards.map((board, index) => (
         <img
           key={index} //the key need to be unique that will make sure component get re-rendered correctly
           className={style.todo_profile_picture_top}
           style={{
             right: `${100 - index * 20}px`, //you need change this to like this for proper right position calculation
             zIndex: 10 - index, //you don't need to have brackets here
           }}
           src={pp1}
           alt="profile"
           />
   )) 
)}

如何用不同的 zIndex 映射数组 react.js 中的每个元素

How to map an array with different zIndex each element in react.js

reactjs

z-index

map-function