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

我使用React显示新闻文章的材质设计网格列表。我将接收到的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>
    );
   }
 })
}

const组件={
MediaTile:React.createClass({
render:function（）{
返回(
)
} 
}),
GridList:React.createClass({
render:function（）{
var newsactions=this.props.newsactions
var renderArticles=newsactions.data.results.map（函数（平铺，键）{
返回hasHiDefPictures（平铺、键）
})
函数hasHiDefPictures（平铺，键）{
返回{tile.multimedia>3？：“”
};
返回(
{renderaticles}
);
}
})
}

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

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

函数hasHiDefPictures（平铺，键）{
返回(
{tile.multimedia>3？：“”
)
};

---

但我不想那样做。有人对如何解决这个问题有什么建议吗？我还是个新手，所以很有可能我没有在适当的地方处理数据。任何帮助都将不胜感激！谢谢

您只需要删除三元组周围的{}。{}在JSX（一个以