在React render中循环对象

实际问题是,img标记有一个额外的双引号。 删除括住大括号的双引号。将显示您的图像

<img src={location.photos[url]} />

你想做的是:

const locations = [
  {
    "name": "First Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }, {
    "name": "Second Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }
]

const element = (
  <div className="community-list">
    {locations && locations.map((location, index) => (
      <div key={index} className="location">
        <h2>{location.name}</h2>
        {location.photos.map(function(photo) {
          return <img src="{photo.url}" />;
        })}
      </div>
    ))}
  </div>
);
ReactDOM.render(element, document.getElementById('mountNode'));

这将遍历 photos a数组 location ,然后使用 url 的节点 photo 反对。