React onClick导致编译错误

Question

我有一段代码如下：

for (let i = 0; i <= total; i++)
  leftButtons.push(<Button onClick={() => console.log(i)} key={`leftBtn_${i}`} color="primary">{i + 1}</Button>);

这将导致编译错误，并且错误消息为“模块解析失败：意外令牌（36:23） 您可能需要适当的加载程序来处理此文件类型。”

如果我删除console.log（i）或将其更改为在onClick中不使用i，它将通过编译。我真的感到困惑，为什么我不能在onClick中使用i。

Answer 1

代替：

onClick={() => console.log(i)}    

尝试做：

onClick={() => console.log(i).bind(this)}   

恕我直言，发生这种情况是因为您使用的是箭头函数语法，并且因为let被限制在for循环内并且没有bind，该控制台的行为是因为它属于let变量所在的全局范围i 不存在。

Answer 2

知道了。 let关键字仅允许变量居住在for块中。但是，onClick函数将在for范围之外使用，这将导致变量i当时不存在。但是，编译错误消息太有线了。

Answer 3

我注意到您使用leftButtons变量来按下按钮，这是错误的方法。您已经有total，并且想要为每条记录打印按钮。

您可以在jsx中轻松完成此操作。

{
 for (let i = 0; i <= total; i++){
  <Button onClick={() => console.log(i)} key={`leftBtn_${i}`} color="primary">{i + 1}</Button>;
 }
}