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

在JSX中渲染编号为循环

1 个答案: