如何在React项目中导入并展示markdown或HTML静态文件

报错原因 #

你遇到的构建报错是因为React默认的webpack配置未配置对应loader处理HTML文件的导入，无法直接将HTML文件作为字符串引入JS模块。另外你代码里dangerouslySetInnerHTML的属性名书写错误，正确键名为__html而非__front。

方案1（预转HTML）的正确实现方式 #

• 改配置实现：安装html-loader，在webpack配置中添加规则：

module: {
  rules: [
    {
      test: /\.html$/,
      use: 'html-loader'
    }
  ]
}

配置完成后即可直接import HTML文件为字符串，修正dangerouslySetInnerHTML的属性名即可正常渲染。

• 零配置实现：将转换好的HTML文件移入项目public目录，在组件挂载时通过fetch获取文件内容：

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

const App: React.FC = () => {
  const [htmlContent, setHtmlContent] = useState('');
  useEffect(() => {
    fetch('/method.html')
      .then(res => res.text())
      .then(text => setHtmlContent(text));
  }, []);
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
};

注意如果预转的HTML中仅保留了LaTeX公式语法，还需要额外引入MathJax的运行时脚本完成公式渲染。

方案2（动态解析Markdown）的实现说明 #

目前业内更常用该方案，维护成本更低，对公式的适配更成熟：

• 推荐使用react-markdown搭配公式处理插件，仅需少量配置即可完成带公式的Markdown渲染：

1. 安装依赖：npm install react-markdown remark-math rehype-katex
2. 引入katex样式与组件：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
// 本地md文件可以配置raw-loader导入，或者放public目录fetch获取
import readmeMd from 'assets/readme.md';

const App: React.FC = () => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeKatex]}
      children={readmeMd}
    />
  )
};

• 该方案无需手动预转MD为HTML，修改MD文件后会自动完成构建，适配性更高。

注意事项 #

• 若渲染的Markdown/HTML内容来自用户上传，需要使用dompurify对内容做XSS过滤后再渲染，避免安全风险。

内容的提问来源于stack exchange，提问作者Guillaume Chérel