jsx中的Javascript

我知道如何在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>
            })}

哪里

---

我已经尝试在函数之前、之后添加它。它只是说无效的语法

{

指向开始括号和结束括号。我想对数组进行排序，然后基本上映射到它上面。

在JSX括号中，您应该插入有效的JSX标记或标记数组或返回其中一个的语句。在第一个示例中，

.map

返回

div

s的数组。这就是它有效的原因

在这种情况下，可以链接数组方法

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

专业提示： 您可以在花括号中执行任何JavaScript代码。只需使用iLife：

{
  (() => {

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

{
(() => {
const sorted=this.state.players.slice（）.sort（函数（a，b）{
返回a.rank-b.rank；
});
const divs=sorted.map（函数（播放器、索引）{
指数+=1；
返回(
{index}.{player.name}
{player.rank}
);
});
返回divs；
})()
}

---

更好的办法是预先准备元素。

显示无效代码。

{
  (() => {

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