我正在創建一個數組以響應打印圖像 select 僅基於數字我想要的圖像

Question

我遇到了一個棘手的問題，我正在創建一個包含 100 個元素的數組，並通過它映射為每個元素生成一個圖像：

 {Array.from({ length: 100 }).map((_, i) => ( <> <img key={i} className={`h-12 object-contain cursor-pointer `} src="/images/panneau.png" alt="" /> </> ))}

這是我得到的： 我想要的是：

• 例如，我有兩個數字 5 和 6，我想在 6 * 5 范圍內將 opacity-50 添加到此圖像中：

Answer 1

您要解決的問題是將平面數組索引轉換為二維數組索引，然后您可以使用它們來應用條件代碼。

假設您希望每行有 10 張圖像，我稱之為 WIDTH。

您可以使用以下公式獲取當前行索引： y = Math.floor(i / WIDTH); 您可以使用以下命令獲取每行中的當前索引： x = i % WIDTH;

現在你有了那些你可以做的事情：

 function MyComponent() { const WIDTH = 10; //number of images in one row return <> {Array.from({ length: 100 }).map((_, i) => { x = Math.floor(i / WIDTH); y = i % WIDTH; opacity = (x <= 5) && (y <= 4)? ' opacity-50': ''; return ( <img key={i} className={`h-12 object-contain cursor-pointer` + opacity} src="/images/panneau.png" alt="" /> ); })} </> }