当我使用带有 javascript 的 create-react-app 时如何导入 md 文件？

Question

我正在尝试在material ui 入门页面中运行博客示例。 问题是源代码是：

在 blog.js 中

import post1 from './blog-post.1.md';

.
.
.
return( <Main>{post1}<Main/>);

在 Main.js 中：

import ReactMarkdown from 'markdown-to-jsx';
export default function Main(props) {
  
  return <ReactMarkdown options={options} {...props} />;
}

如果我运行代码，我会得到这个 output: /static/media/blog-post.1.0c315da1f0a7af641a3a.md而不是 MD 文件中的数据。

我也想这样做，如何在我的 create-react-app 版本中导入 MD 文件？ （没有打字稿）

Answer 1

您需要阅读 markdown object 然后将其加载到ReactMarkdown组件中。 执行此操作的常用方法使用fetch作为中介。 例如：

import * as React from "react";
import ReactMarkdown from "markdown-to-jsx";
import post from "./post.md";

export default function MarkdownImport() {
  let [readable, setReadable] = React.useState({ md: "" });

  React.useEffect(() => {
    fetch(post)
      .then((res) => res.text())
      .then((md) => {
        setReadable({ md });
      });
  }, []);

  return (
    <div>
      <ReactMarkdown children={readable.md} />
    </div>
  );
}

工作示例： https://codesandbox.io/s/reactmarkdown-example-20vmg