时间戳

首页 > 解决方案 > React Tutorial 历史地图（step、move）

javascript - React Tutorial 历史地图（step、move）

问题描述

在此处的“显示过去的动作”部分中，我们有以下代码：

const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

这段代码似乎首先将内置变量“step”映射到变量“move”，然后才具有这个 Python 逻辑：

const moves = [lambda move: const desc = move ... for move in history]

作为熟悉Python但不熟悉javascript的人，您能解释一下：

1）“step”变量没有被分配到任何地方，而且我无法谷歌内置的step变量，那么“step”如何被分配给游戏移动的数量？

2) 这个语法背后的逻辑是什么： (step, move) 意思是先映射 step 进入 move，然后执行 lambda 函数？首先，第一个“地图步入移动”部分对我来说没有意义。

标签： javascriptpythonreactjs

解决方案

JavaScript Array map()函数具有以下语法：

array.map(function(currentValue, index, arr), thisValue)

在这种情况下，step变量是map 函数正在迭代的数组的当前元素的值。变量是当前元素history的索引。move

通常，您使用 map 函数根据原始数组返回一个新数组。在这种情况下，他们正在迭代移动历史并根据历史创建一个新的 HTML<btn>元素数组。

您可以使用以下方法完成相同的操作forEach：

let moves = [];
history.forEach((step, move) => {
    const desc = move ?
          'Go to move #' + move :
          'Go to game start';
    moves.push(
        <li>
            <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
    );
});

推荐阅读