如何在ReactJS应用中实现维基百科式引用功能？

问题根源 #

<sup>标签本身不是可点击的链接元素，即便手动给它添加href属性，浏览器也不会识别并触发跳转行为——只有<a>这类原生具备链接功能的标签，才能通过href实现跳转。

解决方案 #

1. 直接在JSX中构建正确结构（推荐） #

React更建议通过JSX声明式构建DOM，而非直接操作DOM。可以把上标内容嵌套在<a>标签里，再放到<sup>中：

{/* 文章内容区域 */}
{articles.map((item, idx) => (
  <p key={idx}>
    {item.content}
    <sup>
      {/* 跳转到页面内的参考文献锚点 */}
      <a href={`#reference-${idx + 1}`}>[{idx + 1}]</a>
    </sup>
  </p>
))}

{/* 页面底部的参考文献区域 */}
<section id="references">
  <h3>参考文献</h3>
  {articles.map((item, idx) => (
    <p key={idx} id={`reference-${idx + 1}`}>
      [{idx + 1}] {item.reference}
    </p>
  ))}
</section>

2. 若需修改现有DOM中的<sup>标签 #

如果是后端返回的HTML包含<sup>，必须通过DOM操作修改，可将<sup>替换为<a>标签，或在<sup>内部嵌套<a>：

useEffect(() => {
  const supElements = document.querySelectorAll("sup");
  if (supElements.length === 0) return;

  supElements.forEach((sup, index) => {
    // 方案：将sup替换为带href的a标签，保留原内容
    const link = document.createElement("a");
    link.href = `#reference-${index + 1}`; // 可替换为外部链接地址
    link.textContent = sup.textContent;
    // 可选：移除链接下划线，贴近维基百科样式
    link.style.textDecoration = "none";
    sup.replaceWith(link);
  });
}, [articles]);

内容的提问来源于stack exchange，提问作者Zain