我有以下代码：
Enabled = (id) => {
let removal = null;
if (!this.props.disabled) {
removal = (
<span
className="chipRemove"
onClick={() => this.onDelete(id)}
>
x
</span>)
;
}
return removal;
}
它运行良好，但 linter 给了我：
jsx-a11y/no-static-element-interactions
我该如何解决这个错误（根据jsx-a11y）？
来自文档：
强制非交互式 DOM 元素没有交互式处理程序。静态元素，例如
<div> and <span>不应具有鼠标/键盘事件侦听器。而是使用更具语义的东西，例如按钮或链接。
有效的交互元素是：
<a> elements with href or tabIndex props
<button> elements
<input> elements that are not hidden
<select> and <option> elements
<textarea> elements
<area> elements
参考：https : //github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
通过提供 ...role="button" 和 tabIndex 来解决这个错误
<div
onClick={onClickHandler}
onKeyPress={onKeyPressHandler}
role="button"
tabIndex="0">
Save
</div>
从 eslint建议的文档中，了解这一点很重要：
案例：此元素不是按钮、链接、菜单项等。它从它包含的元素中捕获冒泡事件
如果您的元素正在捕捉来自后代元素的冒泡点击或关键事件，那么该元素的适当作用就是展示。
<div
onClick={onClickHandler}
role="presentation">
<button>Save</button>
</div>