Javascript 在React render中的对象上循环

我在React应用程序中循环了一些JSON。在我循环的JSON中，我有一个包含多个图像的对象。我想在这些图像中循环并渲染它们。以下是我尝试过的：

const位置=[
{
“名称”：“第一个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}, {
“名称”：“第二个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}
]
常量元素=(
{locations&&locations.map（（位置，索引）=>(
{location.name}
{Object.key（location.photos）.map（函数（key）{
返回；
})}
))}
);
render（元素，document.getElementById（'mountNode'）您要做的是：

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

const位置=[
{
“名称”：“第一个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}, {
“名称”：“第二个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}
]
常量元素=(
{locations&&locations.map（（位置，索引）=>(
{location.name}
{location.photos.map（函数（照片）{
返回；
})}
))}
);
render（元素，document.getElementById（'mountNode'）；

这将要做的是迭代
位置的
照片
数组，然后使用
照片
对象的
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'));

const位置=[
{
“名称”：“第一个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}, {
“名称”：“第二个位置”，
“照片”：[
{
“url”：”http://placehold.it/250x250",
}, {
“url”：”http://placehold.it/250x250",
}
]
}
]
常量元素=(
{locations&&locations.map（（位置，索引）=>(
{location.name}
{location.photos.map（函数（照片）{
返回；
})}
))}
);
render（元素，document.getElementById（'mountNode'）；

这将要做的是迭代
位置的
照片
数组，然后使用
照片
对象的
url
节点。
实际问题是，img标记有一个额外的双引号。
删除括住大括号的双引号。将显示您的图像

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

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

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


感谢您的回复，在您的回答和上面Gangadhar的回答之间，我能够让它工作！原来你不需要用引号把url括起来。哦，是的。这也是一种方法。好了，祝你的应用程序好运！感谢您的回复，在您的回答和上面Gangadhar的回答之间，我能够让它工作！原来你不需要用引号把url括起来。哦，是的。这也是一种方法。好了，祝你的应用程序好运！