我们如何解决 <p> 标签上的 eslint 错误“不应为非交互式元素分配交互式角色”

Posted 2023-02-22

【中文标题】我们如何解决 <p> 标签上的 eslint 错误“不应为非交互式元素分配交互式角色”

【英文标题】：How can we resolve eslint error on <p> tag "Non-interactive elements should not be assigned interactive roles"

【发布时间】：2022-01-05 03:01:44

【问题描述】：

以下是我尝试执行的代码，但在将其转换为可访问键盘时遇到错误：

<p className=styles['clear-text'] onClick=clearAllFilters>
  'Clear All'
</p

【问题讨论】：

嘿普吉。欢迎来到SO。你还没有粘贴你的代码。请检查并编辑您的问题以防止其关闭

感谢 tushar 让我知道。我现在已经编辑了代码。

onClick 不存在 p 标签

您可以添加role="button" 以消除 eslint 错误。合成事件适用于 react 中的所有元素。

【参考方案1】：

这里是官方解释https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md。

简而言之：要么更改元素类型，要么在 eslint 设置中设置异常。关于设置，有2个选项：特殊cmets的全局设置