最近看到React官网井字棋教程中有一段代码:
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,对于新手来说有点困惑,查资料后:
Array map() 语法:
array.map(function(currentValue, index, arr), thisValue)

文中的step指代history数组元素,move指代该元素在数组中的索引。
教程中将history数组映射为了不同的<btn>
我加了一个控制台输出来说明:
const moves = history.map((step,move)=>{
console.log(step);
console.log(move);
const desc = move ?
'go to move #' + move:
'go to start';
return (
<li key={move}>
<button onClick={()=>this.jumpTo(move)} >{desc}</button>
</li>
);
});

step第一次运行就是初始的history,move指代索引,这里是第一个所以是0.
本文深入解析React官网井字棋教程中的一段关键代码,解释了如何使用Array.map()方法遍历history数组,生成对应的按钮,实现游戏状态回溯功能。
1073





