javascript - 使用 ReactJS 的映射函数内部的三元

Question

我正在使用 React 显示新闻文章的 Material Design 网格列表。我将收到的 JSON 传递给这个 GridList 组件 (this.props.newsArticles)，并映射每个返回的结果，这样我就可以根据它是否有高清图像来过滤数据，然后将数据发送到 MediaTile 进行渲染.我在 GridList 模块的 hasHiDefPictures 函数中遇到了我的三元组问题。我收到语法错误。

const Components = {

 MediaTile: React.createClass({
  render: function() {
    return (
      <GridTile
        title={this.props.tile.title}
       >
      <img src={this.props.tile.multimedia[0].url} />
      </GridTile>
    )
   } 
  }),

 GridList: React.createClass({
  render: function() {
    var newsArticles = this.props.newsArticles
    var renderArticles = newsArticles.data.results.map(function(tile, key) {
      return hasHiDefPictures(tile, key)
    })

    function hasHiDefPictures(tile, key) {
      return {tile.multimedia > 3 ? <Components.MediaTile key={key} tile={tile}/> : ""}
    };

    return (
      <div>
        <GridList>
          {renderArticles}
        </GridList>
      </div>
    );
   }
 })
}

现在解决此语法错误的唯一方法是将返回值包装在 div 中，如下所示:

  function hasHiDefPictures(tile, key) {
    return (
      <div>
        {tile.multimedia > 3 ? <Components.MediaTile key={key} tile={tile}/> : ""}
      </div>
    )
  };

但我不想那样做。有没有人对如何解决这个问题有建议？我对 react 还很陌生，所以很有可能我只是没有在正确的地方处理数据。任何帮助，将不胜感激!谢谢!

Answer 1

您只需移除三元组周围的 {}。 {} 在 JSX(以 < 开头的表达式)中用于评估一些 JS 代码很有用，但是您的数组映射已经出现在纯 JS 代码中(渲染函数的开头)，因此它具有常规的 JS 含义: block 或对象字面量。