React中替代jQuery .load()加载旧页面内容的问题

错误的核心原因有两个：

• res.text()返回的是Promise对象，不是直接的HTML字符串，直接调用html.querySelector必然报错，因为Promise没有该方法。
• 即便拿到HTML字符串，它只是字符串类型，无法直接调用DOM的querySelector方法，必须先把字符串转换成可查询的DOM结构。

另外还有两个潜在问题需要修正：

• useEffect没有依赖数组，会导致组件每次渲染都重复调用load，引发无限循环。
• React无法直接渲染DOM节点，需要将目标内容转为HTML字符串后，用dangerouslySetInnerHTML插入。

以下是修复后的完整组件代码：

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

export default function ContentLoader({ url }) {
    const [content, setContent] = useState("");

    async function load() {
        try {
            const res = await fetch(url);
            const htmlStr = await res.text();
            
            // 创建临时DOM容器解析HTML字符串
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = htmlStr;
            
            // 查找目标.content元素，提取其内部HTML
            const contentElement = tempDiv.querySelector(".content");
            if (contentElement) {
                setContent(contentElement.innerHTML);
            } else {
                setContent('<p>未找到指定内容区域</p>');
            }
        } catch (err) {
            setContent(`<p>内容加载失败：${err.message}</p>`);
            console.error('加载出错:', err);
        }
    }
    
    useEffect(() => {
        load();
    }, [url]); // 仅当url变化时重新触发加载

    return(
        <div className="content" dangerouslySetInnerHTML={{ __html: content }} />
    )
}

关键修复说明 #

1. 异步处理优化：改用async/await处理fetch请求，更直观地获取HTML字符串，避免Promise对象的误用。
2. DOM解析逻辑：通过临时div元素将HTML字符串转为DOM结构，才能使用querySelector定位目标区域。
3. 安全渲染HTML：使用dangerouslySetInnerHTML渲染HTML字符串（注意：确保加载的内容来自可信源，避免XSS风险）。
4. 依赖控制：给useEffect添加[url]依赖数组，避免无意义的重复请求。
5. 错误处理：增加try/catch捕获请求失败或目标元素不存在的情况，提升页面容错性。

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