Question

我有以下数组

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>
  );
}

这就是我宣布道具的方式。

    Viewer.propTypes = {
      images: React.PropTypes.arrayOf(React.PropTypes.shape({
        src : React.PropTypes.string,
        mediaId: React.PropTypes.string
      }))
    };

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

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

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

列表没有呈现，我也没有得到任何数组。任何帮助表示赞赏。

Answer 1

您在映射函数中缺少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>
})}

使用React中的地图渲染列表项

1 个答案: