React中不使用Webpack如何内联HTML文件？

如果你不想为了导入HTML文件专门配置Webpack，可以试试以下几种简便方法：

方法1：将HTML转为JS字符串模块 #

把你的HTML文件改成JS模块，直接导出HTML字符串：

1. 重命名aHtmlFile.html为aHtmlFile.js
2. 在文件内用模板字符串包裹HTML内容并导出：

// aHtmlFile.js
export default `
<div class="example-content">
  <!-- 这里是你的HTML内容 -->
  <p>Hello from inline HTML</p>
</div>
`;

3. 在React组件中导入并使用：

import someFile from './aHtmlFile.js';

const Example = (props) => {
    return (
        <div dangerouslySetInnerHTML={ {__html: someFile} } />
    );
}

方法2：用Fetch动态加载HTML文件 #

通过fetch请求本地HTML文件，加载完成后渲染：

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch('./aHtmlFile.html')
            .then(response => response.text())
            .then(html => setHtmlContent(html))
            .catch(err => console.error('加载HTML失败:', err));
    }, []);

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

注意：本地开发时需要通过HTTP服务器运行项目（比如create-react-app自带的dev server），直接打开HTML文件会触发跨域限制。

方法3：直接在组件内写HTML模板字符串 #

如果HTML内容较短，直接把内容写在组件里更省事：

const Example = (props) => {
    const htmlContent = `
        <div class="example">
            <h3>Inline HTML</h3>
            <p>直接写在组件里的内容</p>
        </div>
    `;
    return (
        <div dangerouslySetInnerHTML={ {__html: htmlContent} } />
    );
}

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