Question

我有一个react组件，它映射渲染函数中的一系列电影，并注销每个电影的图像。我无法将每个图像本身映射到<img />标记。目前看来，所有图像都被吐出到一个<img />标签中，那么如何在图像中循环并将每个图像插入到自己的图像标签中呢？

render () {
const movies = this.state.movies.map((movie, i) => {
  console.log("Image url: ", movie.images.boxArt)
})


return (
  <div className='welcome'>
    <div className='container'>
      <div className='movies'>
        { this.state.loading &&
          <Loader size='10' />
        }

        { !this.state.loading &&
          <div className='movie'>
            <img src={ movies } /> <===SHOULD END UP BEING A ROW OF MOVIE POSTERS
          </div>
        }
      </div>
    </div>
  </div>
 )
 }
}

Answer 1

为每个数组元素渲染一个图像并指定src。像这样：

const movies = this.state.movies.map((movie, i) => <img key={i} src={ movie } />)

<div className='movie'>
    { movies }
</div>

使用.map（）在数组上进行映射映射

1 个答案: