如何正确使用内部页面链接？

Question

我无法弄清楚我遇到的问题 - 在 Google 或 ESLint 手册中找不到任何合适的匹配项。

考虑页面，我希望在该页面中拥有指向某些部分的内部链接（例如，评论部分）：

...
<a href="#comments">Comments: 3</a>
...
<a name="comments"/>
...

在这样的代码上，我有 2 个问题需要解决：

1. 第二个链接没有内容（如果我不想在这种情况下有内容怎么办？）。
2. 第二个链接没有href attr（也不应该是'void'，但是如果没有'href'怎么办？）

我在网络上找不到任何帮助，所以我想知道 - 它是以不同的方式完成的还是什么？

编辑

指定疑问：

• 我正在使用 React/JSX
• 问题在于 JSX 的 Eslint 插件：eslint-plugin-jsx-a11y，抱歉没有指出 =/

Answer 1

由于您没有说明此问题针对的是哪个 HTML 版本，因此我假设 HTML 5。标签不能自关闭，因此您必须将其拆分为开始和结束标签。如果您不想要内容，请不要在标签之间添加内容：

...
<a name="comments"></a>
...

下一个问题是已弃用的name 属性。请改用id：

...
<a id="comments"></a>
...

这应该可以解决您的问题，但您应该考虑删除标记并将id 属性放在后面的任何内容中，并且可以用作引用id 的标记的目标。