React动态地为每个对象创建缩略图

Question

大家好我试图为我的personas ={[]}中的每个缩略图创建一个div，它应该使用this.props.personas.map这样的东西

{this.props.personas.map(thumbnail => {
      return <div><img src={this.props.thumbnail /}></div>
  })}

我已经尝试了这个但是失败的是我的垃圾箱。 Bin

有什么建议吗？我做错了什么

Answer 1

我假设图像的src是在人物角色阵列中（我知道你称之为缩略图，但为了保持一致，让我们使用角色代替）？如果是这样，你应该使用角色代替this.props.thumbnail

{
  this.props.personas.map((persona, i) => {
    return <div key={i}><img src={persona.thumbnail} /></div>
  })
}

除了答案之外，最好在动态生成的组件上使用key prop。在此处阅读有关密钥：https://facebook.github.io/react/docs/lists-and-keys.html#keys