jsx中的Javascript

Question

我知道如何在jsx中使用javascript。我这样做，像这样：

  {this.state.players.map(function(player, index) { 
       index +=1; 
       return <div key={index}><span>{index}. {player.name}</span><span>{player.rank}</span></div> 
      })} 

但为什么不能我添加这样的另一种方法：

this.state.players.sort(function(a, b) { 
    return (a.rank) - (b.rank); 
}); 

地方？

我曾尝试将它追加到该函数之前，之后。它只是说无效的语法{指向打开和关闭括号。我想排序我的数组，然后基本上映射它。

Answer 1

在JSX括号中，您应该插入有效的JSX标记或返回其中一个标记的语句或语句数组。在第一个例子中，.map返回div的数组。这就是为什么它是有效的。

在这种情况下，您可以链式数组方法。

this.state.players.sort(function(a, b) { return (a.rank) - (b.rank); }).map(/*...code*/); 

Answer 2

临提示： 可以执行你在大括号想要的任何JavaScript代码。只需使用IIFE：

{ 
    (() => { 

    const sorted = this.state.players.slice().sort(function(a, b) { 
     return a.rank - b.rank; 
    }); 

    const divs = sorted.map(function(player, index) { 
     index += 1; 
     return (
     <div key={index}> 
      <span> 
      {index}. {player.name} 
      </span> 
      <span>{player.rank}</span> 
     </div> 
    ); 
    }); 

    return divs; 
    })() 
} 

更好的主意是预先准备元素。