Javascript inside jsx

Question

Je sais comment utiliser javascript à l'intérieur de jsx. je fais comme si:

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

mais pourquoi ne peux pas j'ajouter une autre méthode comme ceci:

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

partout?

J'ai essayé de l'ajouter à la fonction, avant, après. et il dit juste la syntaxe invalide { pointant vers l'ouverture et la fermeture des parenthèses. Je veux trier mon tableau et ensuite le mapper essentiellement.

Answer 1

Dans les parenthèses JSX, vous devez insérer une balise JSX valide ou un tableau de balises ou une instruction qui renvoie l'une d'entre elles. Dans le premier exemple .map renvoie tableau de div s. C'est pourquoi c'est valide.

Dans ce cas, vous pouvez chaîner des méthodes de tableau.

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

Answer 2

Pro tip: Vous pouvez exécuter un code JavaScript que vous voulez entre accolades. Il suffit d'utiliser 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; 
    })() 
} 

meilleure idée est de préparer les éléments à l'avance.