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

React create an thumbnail for each object dynamically