javascript - 创建可点击 Material 图标时出现 Linting 错误

Question

我正在尝试创建可点击的 Material 图标，但出现 linting 错误可见的非交互式元素不应具有鼠标或键盘事件监听器 jsx-a11y/no-static-element-interactions

下面是我正在使用的语法

<i className="material-icons control-arrow" onClick={this.sideNav} >arrow_back</i>

请建议我如何在不更改元素的情况下实现这一目标。

Answer 1

只需添加一个 Angular 色，例如按钮:

<i
  className="material-icons control-arrow"
  onClick={this.sideNav}
  role="button">
    arrow_back
</i>

更多信息请参见 jsx-a11y/no-static-element-interactions docs