eslint<a>內部</a>失敗<Link><a>在反應</a>

Question

我得到了 Next.js React 應用程序。 這是我的代碼：

<Link href="/foo">
  <a>Bar</a>
</Link>

eslint 告訴我這個： The href attribute is required for an anchor to be keyboard accessible. 但是 Next.js 希望我在我的Link中加入一個a標簽。 我如何正確配置 eslint 或更改我的代碼，以便它不會警告我？ 當然，除了完全禁用此規則。

Answer 1

將此添加到 .eslintrc.json

"jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "hrefLeft", "hrefRight" ],
        "aspects": [ "invalidHref", "preferButton" ]
    }]

此設置控制錯誤。 我希望這有幫助

Answer 2

eslint-disable-next-line jsx-a11y/anchor-is-valid

如果您使用的是 vscode，只需右鍵單擊問題中的警告，您可以檢查是否僅針對該 lino 或整個文件禁用

Answer 3

對於 NextJS，將"react-app"添加到擴展有幫助。

"extends": [
    ...
    "react-app"
],