React组件加载外部HTML文件时dangerouslySetInnerHTML报错如何解决

开发者阿泽

2026-8-27

报错原因

直接使用require()引入.html文件时，打包工具默认不会返回文件原始字符串，而是返回解析后的资源模块对象/资源访问路径。dangerouslySetInnerHTML要求接收HTML格式的字符串作为入参，传入对象时就会触发React的子节点类型校验错误。

修复方案

根据你使用的打包工具选对应方案即可：

方案1：webpack环境使用raw-loader读取原始HTML字符串

先安装开发依赖

npm install raw-loader --save-dev

修改引入逻辑，显式指定用raw-loader加载目标HTML文件，直接拿到文件原始文本内容：

import React from "react";
// 内联指定loader，跳过默认html解析规则
import htmlContent from '!raw-loader!../../assets/survey-chatbot-extension/index.html';

const Survey = () => {
    return (
        <div dangerouslySetInnerHTML={{__html: htmlContent}}></div>
    )
}

export default Survey;

方案2：通用动态加载方案（适配Vite/所有打包工具）

如果不想配置loader，或者用的是Vite等其他构建工具，可以在组件挂载后请求HTML文件内容再渲染：

import React, { useEffect, useState } from "react";
// 把HTML文件转为可访问的静态资源路径
import htmlFileUrl from '../../assets/survey-chatbot-extension/index.html?url';

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

    useEffect(() => {
        // 拉取HTML文件的文本内容
        fetch(htmlFileUrl)
            .then(res => res.text())
            .then(htmlText => setHtmlContent(htmlText))
    }, []);

    return (
        <div dangerouslySetInnerHTML={{__html: htmlContent}}></div>
    )
}

export default Survey;