在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'} />