我的 reactjs styledcomponent 包含以下代码：
<a styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
这工作正常，但 eslint 抱怨：
Static HTML elements with event handlers require a role.
我该如何解决这个错误？
如何修复“带有事件处理程序的静态 HTML 元素需要一个角色。”？
IT技术
reactjs
eslint
styled-components
prettier
2021-05-14 06:47:28
4个回答
您需要在 a 标签中添加角色props以避免此警告，例如按钮
<a role = "button" styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
我想这是因为您的锚标签中缺少 HREF props（不确定）
就我而言，我使用了 aria-hidden="true" 所以我可以提交。
<i className="pwdicon" onClick={togglePasswordVisiblity} >
After I updated like below,
<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >
My problem is resolved
参考链接：https : //github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
您需要明确设置角色。所以，试试下面的代码：
<a role="button" styling="link" onClick={this.gotoLink}>
<SomeComponent />
</a>
此外，正如您所看到的，我onClick通过替换常规声明中的箭头函数来修改处理程序。它将减少烦人且昂贵的计算。
早期的答案不给出具体的例子，我所缺少的是一个列表中roles。
如果有人正在寻找其他角色，此处列出了部分列表。
缺少的一个例子是我需要的。roletab