在React应用中实现Wikipedia风格的引用链接

<p>这是一段包含引用的文本<sup><a href="https://www.php.cn/link/9c108d0cb8dd18ea82733a05930b1aed">1</a></sup>。</p>
<p>另一段文本，引用自外部资源<sup><a href="https://www.example.com/source" target="_blank">2</a></sup>。</p>

import React, { useEffect, useState } from 'react';

function ArticleContent({ articlesData }) {
  const [content, setContent] = useState(articlesData);

  useEffect(() => {
    // 确保DOM元素在组件渲染后可用
    if (content) {
      // 获取所有可能包含引用的上标元素
      let supElements = document.querySelectorAll("sup");

      supElements.forEach((sup, index) => {
        // 检查sup元素是否已经包含了a标签，避免重复注入
        if (!sup.querySelector('a')) {
          // 假设我们有一个引用链接的数组或映射
          const referenceLinks = [
            'https://www.google.com', // 对应第一个上标
            'https://www.bing.com',   // 对应第二个上标
            '#local-reference-3'      // 对应第三个上标，可以是页面内部锚点
          ];

          // 获取对应的链接
          const link = referenceLinks[index];

          if (link) {
            // 创建一个新的a标签
            const anchor = document.createElement('a');
            anchor.setAttribute('href', link);
            anchor.textContent = sup.textContent; // 将sup原有的内容（如数字）移到a标签内

            // 清空sup的内容，然后将a标签添加到sup中
            sup.innerHTML = ''; // 清空sup内部
            sup.appendChild(anchor); // 将a标签添加到sup中
          }
        }
      });
    }
  }, [content]); // 依赖content，当content变化时重新执行

  return (
    <div>
      <h1>文章标题</h1>
      <p>
        这是一段包含引用的文本<sup>1</sup>。这些引用需要动态地链接到外部资源或页面内部的锚点。
      </p>
      <p>
        另一个示例引用<sup>2</sup>，它将链接到不同的地方。
      </p>
      <p>
        最后一个引用<sup>3</sup>，用于演示。
      </p>
      {/* 假设这里是引用列表的锚点，例如： */}
      <h2 id="local-reference-3">本地引用 3</h2>
      <p>这是本地引用3的详细内容。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11136">
                            <img src="https://img.php.cn/upload/webcode/000/000/018/176509260279167.jpg" alt="BJXSHOP网上开店专家">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11136">BJXSHOP网上开店专家</a>
                            <p>BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="BJXSHOP网上开店专家">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11136" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="BJXSHOP网上开店专家">
                        </a>
                    </div>
                
    </div>
  );
}

export default ArticleContent;