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

【问题标题】：How can we resolve eslint error on <p> tag "Non-interactive elements should not be assigned interactive roles"我们如何解决 <p> 标签上的 eslint 错误“不应为非交互式元素分配交互式角色”
【发布时间】：2022-01-05 03:01:44
【问题描述】：

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

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

【问题讨论】：

嘿普吉。欢迎来到SO。你还没有粘贴你的代码。请检查并编辑您的问题以防止其关闭
感谢 tushar 让我知道。我现在已经编辑了代码。
onClick 不存在 p 标签
您可以添加role="button" 以消除 eslint 错误。合成事件适用于 react 中的所有元素。

标签： javascript reactjs typescript react-redux

【解决方案1】：

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

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

【讨论】：