在React应用中实现维基百科风格的引用链接：正确使用上标和锚点

import React, { useEffect } from 'react';

function ArticleDisplay({ articles }) {
  useEffect(() => {
    // 查找页面中所有的sup标签
    let supElements = document.querySelectorAll("sup");

    if (supElements && supElements.length > 0) {
      supElements.forEach(sup => {
        // 检查sup内部是否已经包含a标签，避免重复包裹
        if (!sup.querySelector('a')) {
          // 获取sup标签的原始内容，例如"1"
          const originalContent = sup.innerHTML;
          // 构建新的HTML，将原始内容包裹在a标签中
          // 注意：此处示例链接为固定值，实际应用中应根据引用内容动态生成
          sup.innerHTML = `<a href="https://www.php.cn/link/b57f7e3c691e9086caa881b52de2a661" target="_blank" rel="noopener noreferrer">${originalContent}</a>`;
        }
      });
    }
  }, [articles]); // 当articles数据变化时重新执行效果

  return (
    <div>
      {/* 假设这里是文章内容，其中可能包含sup标签 */}
      <p>这是一段包含引用的文本。例如，某个事实需要引用<sup>1</sup>。</p>
      <p>另一段文本，其中也有一个引用<sup>2</sup>。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1504">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680389170951.jpg" alt="魔术橡皮擦">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1504">魔术橡皮擦</a>
                            <p>智能擦除、填补背景内容</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="魔术橡皮擦">
                                <span>80</span>
                            </div>
                        </div>
                        <a href="/ai/1504" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="魔术橡皮擦">
                        </a>
                    </div>
                
      {/* 更多文章内容 */}
    </div>
  );
}

export default ArticleDisplay;

import React from 'react';

function ArticleContent() {
  // 假设引用链接可以从组件的props、state或某个数据源中获取
  const referenceData = [
    { id: 1, url: "https://www.php.cn/link/b57f7e3c691e9086caa881b52de2a661/search?q=reference+1" },
    { id: 2, url: "https://www.wikipedia.org/wiki/React_(web_framework)" },
    { id: 3, url: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup" }
  ];

  // 辅助函数，根据引用ID获取URL
  const getReferenceUrl = (id) => {
    const ref = referenceData.find(r => r.id === id);
    return ref ? ref.url : '#'; // 如果找不到则返回一个空链接
  };

  return (
    <div>
      <h1>React应用中的引用示例</h1>
      <p>
        React是一个用于构建用户界面的JavaScript库<sup>
          <a href={getReferenceUrl(2)} target="_blank" rel="noopener noreferrer">2</a>
        </sup>。
        它由Facebook开发并维护。
      </p>
      <p>
        上标标签`sup`用于显示上标文本<sup>
          <a href={getReferenceUrl(3)} target="_blank" rel="noopener noreferrer">3</a>
        </sup>。
        而`a`标签则负责创建超链接。
      </p>
      <p>
        这是一个通用的引用示例<sup>
          <a href={getReferenceUrl(1)} target="_blank" rel="noopener noreferrer">1</a>
        </sup>。
      </p>

      {/* 可以在文章末尾列出所有引用 */}
      <h2>参考文献</h2>
      <ol>
        {referenceData.map(ref => (
          <li key={ref.id}>
            <a href={ref.url} target="_blank" rel="noopener noreferrer">
              [{ref.id}] {ref.url}
            </a>
          </li>
        ))}
      </ol>
    </div>
  );
}

export default ArticleContent;