如何在React组件的Div内加载HTML文件并实现内部链接无跳转

要实现点击HTML内的超链接时，目标文件仍加载在同一个div中且不改变浏览器地址栏，核心是拦截a标签的默认跳转行为，手动加载目标HTML并更新组件内容。以下是具体实现方案：

实现步骤 #

• 用状态管理当前显示的HTML内容
• 加载初始HTML文件（如index.html）
• 为渲染后的HTML中的所有a标签绑定点击事件，阻止默认跳转
• 拦截点击后，通过fetch获取目标HTML文件内容，更新组件状态

React组件示例代码 #

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

const HtmlViewer = () => {
  const [htmlContent, setHtmlContent] = useState('');

  // 加载初始HTML文件
  useEffect(() => {
    loadHtml('index.html');
  }, []);

  // 加载指定HTML文件的函数
  const loadHtml = async (filename) => {
    try {
      const response = await fetch(`/${filename}`);
      const htmlText = await response.text();
      setHtmlContent(htmlText);
    } catch (error) {
      console.error('加载HTML文件失败:', error);
    }
  };

  // 绑定a标签点击事件，拦截跳转
  useEffect(() => {
    if (!htmlContent) return;

    // 用Cheerio解析HTML，找到所有a标签
    const $ = cheerio.load(htmlContent);
    $('a').each((_, element) => {
      const domElement = document.getElementById('html-container').querySelector(`a[href="${$(element).attr('href')}"]`);
      if (domElement) {
        domElement.addEventListener('click', (e) => {
          e.preventDefault(); // 阻止默认跳转
          const targetHref = $(element).attr('href');
          loadHtml(targetHref); // 加载目标HTML
        });
      }
    });
  }, [htmlContent]);

  return (
    <div
      id="html-container"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  );
};

export default HtmlViewer;

关键说明 #

1. dangerouslySetInnerHTML：React中渲染HTML字符串的标准方式，注意确保加载的HTML文件是可信的，避免XSS风险。
2. 事件绑定时机：每次htmlContent更新后，都需要重新为新渲染的a标签绑定点击事件，所以在useEffect中监听htmlContent的变化。
3. 文件路径：因为HTML文件放在public目录下，所以fetch的路径直接用/${filename}即可访问。

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