jsx-a11y/anchor-is-valid 正确性
它的作用
HTML <a> 元素，若具有有效的 href 属性，则正式定义为表示一个 超链接。 也就是说，它连接的是两个 HTML 文档之间，或同一文档内两个位置之间的链接。
虽然过去可以将逻辑附加到锚元素上，但随着 JSX 库的出现， 现在更容易将逻辑附加到任意 HTML 元素上，包括锚元素。
此规则旨在防止用户通过点击锚元素来执行逻辑，同时确保提供给锚元素的 href 是有效的。如果锚元素附带了逻辑，该规则建议将其改为 button，因为这很可能是用户真正想要的效果。
锚 <a></a> 元素应用于导航，而 <button></button> 应用于用户交互。
考虑以下情况：
jsx
<>
<a href="javascript:void(0)" onClick={foo}>
执行操作
</a>
<a href="#" onClick={foo}>
执行操作
</a>
<a onClick={foo}>执行操作</a>
</>上述所有锚元素的实现都表明该元素仅用于执行 JavaScript 代码。所有这些都应该替换为：
jsx
<button onClick={foo}>执行操作</button>为什么这是不好的？
锚元素不应包含逻辑且必须拥有正确的 href 属性，原因有很多：
- 可能会破坏用户导航的正常流程，例如用户希望在新标签页中打开链接，但默认“点击”行为被阻止
- 可能导致无效链接，搜索引擎爬虫无法正确遍历网站，从而影响 SEO 排名
示例
此规则的 有效 代码示例：
jsx
<>
<a href={`https://www.javascript.com`}>跳转至此</a>
<a href={somewhere}>跳转至此</a>
<a {...spread}>跳转至此</a>
</>此规则的 无效 代码示例：
jsx
<>
<a href={null}>跳转至此</a>
<a href={undefined}>跳转至此</a>
<a href>跳转至此</a>
<a href="javascript:void(0)">跳转至此</a>
<a href="https://example.com" onClick={something}>
跳转至此
</a>
</>参考资料
配置
此规则接受一个配置对象，包含以下属性：
validHrefs
type: string[]
default: []
有效 href 值的字符串列表。
如何使用
要通过配置文件或 CLI 启用 此规则，可以使用：
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/anchor-is-valid": "error"
}
}bash
oxlint --deny jsx-a11y/anchor-is-valid --jsx-a11y-plugin