List 使用React和JSON的图像网格？

编辑：我添加了这个

我是JSX的高手，我正在尝试（正确地）使用JSON图像文件在React中构建一个图像网格

这样做的最佳或“正确”方法是什么

我的JSON文件（根据Nick的建议更新）：

我的列表模块（从在线示例中复制）：

var List = React.createClass({
    render: function() {
      return (
        <ul>
          {this.props.list.map(function(listValue){
            return <li>{listValue}</li>;
           })}
        </ul>
      )
    }
  });

module.exports = List;

var Playlist = React.createClass({
  render() {
    let playlistImages = $.getJSON('images/temp/playlist_tn.json', images);
    return (
      <ReactCSSTransitionGroup transitionName="pagefade" transitionAppear={true} transitionAppearTimeout={500}>
        <List list={playlistImages.images} />
      </ReactCSSTransitionGroup>
    )
  }
})

module.exports = Playlist;

var List=React.createClass({
render:function（）{
返回(

{this.props.list.map（函数（listValue））{
返回
{listValue}
；
})}

)
}
});
module.exports=列表；

我的更新列表容器组件：

var List = React.createClass({
    render: function() {
      return (
        <ul>
          {this.props.list.map(function(listValue){
            return <li>{listValue}</li>;
           })}
        </ul>
      )
    }
  });

module.exports = List;

var Playlist = React.createClass({
  render() {
    let playlistImages = $.getJSON('images/temp/playlist_tn.json', images);
    return (
      <ReactCSSTransitionGroup transitionName="pagefade" transitionAppear={true} transitionAppearTimeout={500}>
        <List list={playlistImages.images} />
      </ReactCSSTransitionGroup>
    )
  }
})

module.exports = Playlist;

var Playlist=React.createClass({
render（）{
让playlimages=$.getJSON（'images/temp/playlist\u tn.json'，images）；
返回(
)
}
})
module.exports=播放列表；

---

如果要像这样渲染组件，例如将

图像

节点传递到

列表

属性：

var mainComponent = React.createClass({
  render() {
    let jsonFileData = //ajax call to get file here
    return (
      <List list={jsonFileData.images} />
    )
  }
})

我还建议在地图中尽可能使用箭头功能，这会使阅读更容易：

---

您的

列表

组件看起来完全正确，只需显示一个图像而不是

li

。你有什么问题吗？很好，谢谢。是的，我想有一个类名。我仍然不清楚实际的ajax或getJSON调用应该放在哪里。我也是ajax新手：）假设我的json文件路径是images/temp/playlist_tn.json，我将把ajax块放在哪里，它看起来是什么样子，这样它就变成了什么？在将文件传递到列表之前，需要将文件读入

jsonFileData

，我将更新答案。检查正在呈现的顶部代码块

List

i更新了上面的列表容器组件（var Playlist）。我以前使用过const Playlist=（）=>（…因为我还不清楚何时使用const、var和let。我以为这只是ES5 vs 6的东西，但我认为var允许您访问生命周期。无论如何，我将其更改为一个var，就像您的示例一样。您需要

JSON。首先将文件中的数据解析为变量
<ul>
  {this.props.list.map( image =>
    <li>
      <img url={image.url} className={image.class} />
    </li>
  )}
</ul>

<img {...image} />