reactjs - 如何解决 jsx-a11y/no-static-element-interactions 限制？

Question

我使用以下 jsx 在 FAQ 表中构造一个条目:

  <li key={faqKey} className={styles.entry} onClick={handleExpandFn}>
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

这个想法是，当用户单击该条目时，它将切换该条目的打开状态。换句话说，当用户单击打开的常见问题解答条目时，它将关闭它。否则它将打开它。

但是 li 标记会触发此 eslint 违规:可见的非交互式元素不应具有鼠标或键盘事件监听器 jsx-a11y/no-static-element-interactions

不幸的是，我认为除了上述 html 标记之外没有其他方法。 由于是jsx，它也不允许重写，例如 //eslint-disable-line jsx-a11y/no-static-element-interactions (内联注释将打印到网页上)

那么我该如何解决这个问题呢？乐于使用不同的 jsx 标记或 jsx eslint 覆盖

Answer 1

对于那些正在寻找解决方法的人，请在代码中使用 role="presentation"。