在JSX中渲染编号为循环

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