在JSX中渲染编号为for循环

Question

我想显示一系列图片，但下面的代码不会用实际编号代替{i}。它呈现：

<div> 
    <img src='/img/picture{i}.jpg' /> 
    <img src='/img/picture{i}.jpg' /> 
</div> 

这是代码。

class Pictures extends Component { 
    render() { 

    return (
     <div> 
     {Array.from({length: 2}, (_, i) => (
      <img src='/img/picture{i}.jpg' /> 
     ))} 
     </div> 
    ) 
    } 
} 

Answer 1

这应该工作（与ES6模板文字语法）：

<img key={i} src={`/img/picture${i}.jpg`} /> 

或者，您可以使用字符串连接语法：

<img key={i} src={'/img/picture' + i + '.jpg'} />