Javascript 在React中使用map呈现列表项

我有以下数组

var IMAGES = [
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    },
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    },
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    }
]

这是我希望渲染数组的React组件

function Viewer(props){
  return (
    <div className= 'row'>
      <div className= 'image-viewer'>
        <ul className='list-inline'>
        {props.images.map(function(image){
          <li><a href='#'><img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/></a></li>
        })}

        </ul>
      </div>
    </div>
  );
}

这就是我在主容器中传递道具的方式

function App(props){
  return (
    <div className= 'container-fluid'>
      <Header />
      <div>

      </div>
      <Viewer images={IMAGES}/>
    </div>
  )
}

功能应用程序（道具）{
返回(
)
}

列表没有被渲染，我也没有得到任何数组。

---

非常感谢您的帮助。

您缺少映射函数中的

return

语句：

{props.images.map(function(image){
    return <li><a href='#'><img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/></a></li>
})}

{props.images.map（函数（图像））{
返回

})}

谢谢，这将呈现组件，但我在控制台中遇到以下错误

数组或迭代器中的每个子级都应该有一个唯一的“key”属性。

看看。是的，您应该添加

实际得到的属性。谢谢
{props.images.map(function(image){
    return <li><a href='#'><img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/></a></li>
})}