嵌套循环的JSX html图像逐行显示

Question

我想渲染来自redux状态的每行3个图像。我已经用下面的代码成功地使它工作了，但对我来说，这似乎太草率了。有更好的实践来实现这一点吗？我做if语句检查图像是否未定义的行是因为有时我有很多图像不是3的倍数，这会使我的循环中断。

function renderImages(){
let imgList = [];
let j = 0;
let counter = 3;
for (var i = 0; i < Math.ceil(images.length / 3); i++){
const insideDiv = [];
for (j; j < counter; j++){
if(typeof images[j] !== 'undefined'){
insideDiv.push(
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[0]} alt={images[j].ref}/>
</div>
);
};
};
counter += 3
imgList.push(
<div className="row row-emphasized">
{insideDiv}
</div>
)
};
return imgList;
};

期望输出：

<div className="row row-emphasized">
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[1]} alt={images[1].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[2]} alt={images[2].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[3]} alt={images[3].ref}/>
</div>
</div>
<div className="row row-emphasized">
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[4]} alt={images[4].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[5]} alt={images[5].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[6]} alt={images[6].ref}/>
</div>
</div>
<div className="row row-emphasized">
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[7]} alt={images[7].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[8]} alt={images[8].ref}/>
</div>
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={images[j].img[9]} alt={images[9].ref}/>
</div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

您可以先将数组拆分为更小的块，然后在数组上映射

const chunk = (array, size) => {
const chunks = [];
for (let i = 0; i < array.length / size; i++) {
chunks.push(array.slice(i * size, (i + 1) * size));
}
return chunks;
};
function renderImages() {
const groupedImages = chunk(images, 3);
return groupedImages.map(group => (
<div className="row row-emphasized">
{group.map(image => (
<div id="blank-col" className="col col-sm col-emphasized">
<img className="tile-img" src={image.img[0]} alt={image.ref} />
</div>
))}
</div>
));
}

Answer 2

一个的多种方法

function parseImages(){
const length = images.length
const res = []
for(let i = 0; i < length; i += 3){
let temp = []
if(images[i]){
temp.push(images[i])
}
if(images[i+1]){
temp.push(images[i+1])
}
if(images[i+2]){
temp.push(images[i+2])
}
if(temp.length > 0){
res.push(temp)
}
}
return res
}
function renderImages(){
const parsed = parseImages()
return parsed.map(set => <ImageRow set={set}/>)
};
const ImageRow = ({set}) => (
<div className="row row-emphasized">
{set.map(image => {
if(typeof image !== 'undefined'){
return (
<div id='blank-col' className="col col-sm col-emphasized">
<img className='tile-img' src={image.img} alt={image.ref}/>
</div>
)
}
})}
</div>
)