Question

我正在尝试使用React组件中的for循环渲染图像，但是该循环无法正常工作。当我调用应该渲染同一图像50次并在屏幕上显示50张图像的函数时，该图片仅渲染一次。

import React from 'react';
import dipesh from '../../dipesh.jpg';

export default function Tshirt() { 
    let renderTshirt = () => { 
        for(let i=0; i < 50; i++) {
            return( <img src={dipesh} alt="pic"/> )
        }
    }
    return ( <div> {renderTshirt()} </div> )
}

Answer 1

尝试以下代码：


import React from 'react';
import dipesh from '../../dipesh.jpg'; 

export default function Tshirt() {
 let renderTshirt = () => {
    let tShirtList = [];
    for(let i=0; i<50; i++){ 
      tShirtList.push( <img src={dipesh} alt="pic"/> );
    };
    return tShirtList;
 }
 return ( <div> {renderTshirt()} </div> ) 
}

希望这可以解决您的问题。

即使从循环返回图像（该图像应返回50次），该图像也仅呈现一次

1 个答案: