Question

编辑：我添加了FIDDLE。

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

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

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

{
  "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"
    }
  ]
}

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

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>

如果您将要调用class和className的json url属性更改为src，则可以使用spread运算符一次性设置所有道具太：

<img {...image} />

Working fiddle

使用React和JSON的图像网格？

1 个答案: