Question

我对js没有经验，建议在React Native之前学习React。我的问题来自Intro to React's tutorial的代码。

在教程中，我们制作了一个名为history的列表，move为key。

class Game extends React.Component {
  constructor() {
    super();
     this.state = {
      history: [{
        squares: Array(9).fill(null)
      }],
      xIsNext: true,
      stepNumber: 0,
    };
  }

  [...]

  render() {
    [...]

    const moves = history.map((step, move) => {
      const desc = move ?
        'Move #' + move :
        'Game start';
      return (
        <li key={move}>
          <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
        </li>
      );
    });

[...]

该部分的解释是

[...] React要求您在列表中的每个元素上指定一个键属性，该字符串用于区分每个组件与其兄弟组件。在这种情况下，alexa，ben，claudia可能是明智的关键;如果项目对应于数据库中的对象，则数据库ID通常是一个不错的选择：

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

[...]强烈建议您在构建动态列表时分配正确的密钥。如果您没有合适的密钥，您可能需要考虑重组数据以便这样做。 [...]如果您没有指定任何密钥，React会警告您并回退使用数组索引作为密钥 - [...]

现在我感到困惑的是，上面move的{{1}}是什么？我无法看到任何暗示history被赋值的内容，但是当它被打印时，它会显示列表索引？怎么会？

Answer 1

使用 map 方法创建列表以“映射”历史数组。 map 将为数组中的每个元素调用一个函数;此回调函数的第二个参数是数组中元素的索引。

在您的代码中，回调函数如下所示：

(step, move) => {
  const desc = move ?
    'Move #' + move :
    'Game start';
  return (
    <li key={move}>
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
    </li>
  );
}

因此数组的索引（第二个参数）被称为 move （您可以将其称为任何内容）;然后将其值作为每个列表项的键属性进行呈现。

Description of map here

React Intro教程：list＆key; key如何获得它们的价值？

1 个答案: