Javascript React onClick导致编译错误

我有一段代码如下：

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

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

for（设i=0；i{i+1}）；

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

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

如果在onClick中删除console.log（I）或将其更改为不使用I，它将通过编译。我真搞不懂为什么我不能在onClick中使用I。

而不是：

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

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

试着做：

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

---

我想，这是因为您使用的是箭头函数语法，并且由于

let

被限制在for循环内，而没有

bind

，所以控制台将表现为属于全局/外部范围，而let变量

i

不存在。

明白了。let关键字只允许变量i位于for块中。但是，onClick函数将在for范围之外使用，这将导致变量i当时不存在。但是，编译错误消息太复杂。

正如我注意到的，您使用

leftButtons

变量来按下按钮，这是错误的方法。您已经有了

total

，并且您想要打印每条记录的按钮

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

您可以在

jsx

中轻松实现这一点

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

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

{
对于（设i=0；i{i+1}；
}
} 

你想要实现什么Hi Muhaimin，谢谢你的关注。我想要实现的东西在这里并不重要。我可以找到一种方法。但是我不明白为什么这段代码会导致编译错误。为什么我不能在onClick中使用变量I。可能是因为你使用的是箭头函数还没有配置babel。你可以参考Hi Shubham，谢谢你的回答。但我确实配置了babel，我可以使用其他地方的箭头函数。如果我将其更改为console.log（2），它将通过编译。因此，问题是使用变量i。您能在控制台中将变量i设置为字符串吗。谢谢您的回答。但这不是因为绑定这个。我已经发现了问题。请参阅我的帖子。它不应该与绑定相关，因为onClick函数不使用它。是的，我尝试了绑定它确实有效。但是如果我改变为（让我…）为（变量I…），它工作得很好。@Kevin是的，这是因为

let

被限制在for循环内，而没有

bind

，该控制台的行为将如同它属于全局/外部范围一样，而您的let变量i不存在。嗨，Ruhul，谢谢您的回答。但是，总数只是一个数字，而不是一个数组。因此，map在for中不起作用这个案例。@Kevin，你是对的，但是它解决了你的问题吗？Ruhul，谢谢你的提问。我通过使用event.target.innerText来获得我想要的号码来解决这个问题。找到这个解决方案实际上并没有花费我太多的时间。但是找出我的原始代码不起作用的原因是很难的。如果我遇到一些错误和错误，我会感到不舒服我不明白