使用 React 和 JSON 的图像网格？

Question

编辑：我添加了这个 FIDDLE。

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

执行此操作的最佳或"correct"方法是什么？

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

{
  "images": [
    {
      "url": "./images/temp/playlist_tn_01.jpg",
      "className": "playlist-tn"
    },
    {
      "url": "./images/temp/playlist_tn_02.jpg",
      "className": "playlist-tn"
    },
    {
      "url": "./images/temp/playlist_tn_03.jpg",
      "className": "playlist-tn"
    }
  ]
}

我的List模块（复制自网上的一个例子）：

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;

UPDATE FIDDLE

Answer 1

如果你像这样渲染组件，例如将 image 节点传递给 list 属性:

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

那么你的 jsx 应该是这样读的，你需要将 json 的属性映射到 img 元素上，你需要使用 className 而不是 class 作为属性名称：

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

module.exports = List;

我还建议在您的地图中尽可能使用箭头函数，这样更易于阅读：

<ul>
  {this.props.list.map( image =>
    <li>
      <img url={image.url} className={image.class} />
    </li>
  )}
</ul>

如果您将 json class 属性更改为 className 并将 url 更改为 src，您可以使用传播运算符也可以一次性设置所有道具：

<img {...image} />

Working fiddle

使用 React 和 JSON 的图像网格？

Image grid using React and JSON?

list

jsx

reactjs