我正在创建一个数组以响应打印图像 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="" /> ); })} </> }