如何在 React 中导入 Markdown 或 HTML 文件

Question

我正在制作一个 Reactjs 应用程序，并且我有一个 Readme.md 降价文件，我想在我的应用程序中显示它。我对如何进行感到困惑。我正在描述我在下面尝试过的内容，但它看起来比它应该的更复杂，让我觉得我正在接近这个错误。我很想知道人们通常如何处理在 react 应用程序中或更普遍地在 javascript 中包含静态降价或 html 内容。

我看到了多条路径：

1. 将 markdown 文件翻译成 html 并想办法将 html 包含在 react App 中。
2. 使用 javascript markdown 库（比如可能是 https://remark.js.org/）直接渲染 markdown

markdown 还包含 mathjax。

我认为路线 1 是最好的，因为 markdown 是一个静态文件，我不需要使用额外的 javascript 库来动态呈现它。

所以我使用 pandoc 从 Markdown 生成了 HTML，将其放入 src/assets/readme.html 并在我的 App.js 中尝试了这个：

import React from 'react';
import readme from 'assets/method.html';

const App: React.FC = () => {
  return (
      <div dangerouslySetInnerHTML={ { __front: readme } }/>
  );
};

但这不起作用，因为它会产生错误：

./src/assets/method.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我检查了指向的 URL，但找不到任何用于加载 HTML 文件的指针。

这看起来比它应该的更复杂，我想知道我是否遗漏了什么。

Answer 1

您可以查看以下代码：

   fetchExternalHTML: function(fileName) {
  Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then(
    response => {
      this.setState({
        extHTML: response
      });
    }, err => {
      //handle your error here
    }
  );
}