React简介教程：列表的键值如何获得它们的值？

我没有js的经验，并建议在React Native之前学习React。我的问题来自Intro to React's tutorial的代码。React简介教程：列表的键值如何获得它们的值？

在教程中，我们做了一个名为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> 
    ); 
    }); 

[...]

该部分的解释是

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

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

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

现在我对此感到困惑，是move上面history？我看不到任何暗示move被分配一个值，但是当它被打印时，它显示列表索引？怎么来的？

来源

2016-11-14 Konayuki

我强烈认为努力学习了一个框架，在很大程度上依赖于知道JS之前学习JS。 –

该列表正在通过使用地图方法'map over'历史数组创建。图将为数组中的每个元素调用一个函数;此回调函数的第二个参数是数组中元素的索引。

在代码中的回调函数如下：

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

，因此阵列，第二个参数的索引称为移动（你可以叫它什么）;然后将它的值呈现为每个列表项的关键属性。

Description of map here

来源

2016-11-14 08:23:27

那么...步骤'当前值'？但只是没有使用？ – Konayuki

nvm终于明白了。非常感谢，你的解释和联系真的有很大的帮助！ – Konayuki

React简介教程：列表的键值如何获得它们的值？

回答

相关问题