逐行嵌套循环JSX html图像

Question

我想每行渲染 3 张来自我的 redux 状态的图像。我已经设法使用下面的代码使其工作，但对我来说似乎非常草率。有没有更好的做法来实现这一目标？ 我使用 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>
)