jsx 中的 Javascript答案

【问题标题】：Javascript inside jsxjsx 中的 Javascript
【发布时间】：2017-09-16 20:39:51
【问题描述】：

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

在哪里？

我已经尝试将它附加到函数之前，之后。它只是说无效的语法{ 指向左括号和右括号。我想对我的数组进行排序，然后在本质上对其进行映射。

【问题讨论】：

显示无效代码。

标签： javascript reactjs jsx

【解决方案1】：

在 JSX 括号中，您应该插入有效的 JSX 标签或标签数组或返回其中之一的语句。在第一个示例中，.map 返回 divs 的数组。这就是它有效的原因。

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

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

【讨论】：

【解决方案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;
  })()
}

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

【讨论】：