Javascript inside jsx

Question

私はjsxの中でjavascriptを使う方法を知っています。どこでも

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

：私はこのような別の方法を追加し、なぜカント

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

をしかし、私はそうのようにそれをやっていますか？

私は関数の前、後にそれを追加しようとしました。それは単に、無効な構文{が開きかっこを指していると言います。私は私の配列をソートし、それを本質的にマップしたい。

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

さらに良いアイデアは、あらかじめ要素を準備することです。