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

Question

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

 {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

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

 {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"
           />
   )) 
)}

Answer 2

尝试这样的事情

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"
    />
)