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; 
    })() 
} 

更好的主意是預先準備元素。