Рендер пронумерован для цикла в JSX

Я пытаюсь показать серию изображений, но следующий код не заменяет {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>
    )
  }
}

reactjs javascript jsx
person Hedge    schedule 08.08.2017    source источник
comment
Возможный дубликат Reactjs — изображения не отображаются   -  person Shubham Khatri    schedule 08.08.2017

Ответы (1)


arrow_upward
5
arrow_downward

Это должно работать (с синтаксисом литералов шаблона ES6):

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

Кроме того, вы можете использовать синтаксис конкатенации строк:

<img key={i} src={'/img/picture' + i + '.jpg'} />
person Denialos    schedule 08.08.2017
comment
и не забывайте key : facebook.github.io/react/docs /lists-and-keys.html - person Hitmands; 08.08.2017
comment
Обратите внимание: medium.com/@ робинпокорный/ - person Andy; 08.08.2017
comment
@Andy: Я знаю это, но в практическом смысле у меня никогда не было проблем с использованием индекса в качестве ключа (конечно, мой опыт может зависеть от конкретных вещей приложения, таких как иерархия дерева компонентов, зависимости и т. д.). Не уверен в опыте других. - person Denialos; 08.08.2017