时间戳

首页 > 解决方案 > React onClick 导致编译错误

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>);

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

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

标签： javascriptreactjsfor-loop

解决方案

代替： 

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

尝试做： 

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

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

推荐阅读