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

Question

I'm trying to run the blog example in material ui getting started page . the problem is that the source code is:

in blog.js

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

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

and in Main.js:

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

if I run the code I get this output: /static/media/blog-post.1.0c315da1f0a7af641a3a.md instead of the data inside the MD file.

I want to do the same,how can I import MD files in my create-react-app version? (without typescript)

Answer 1

You'll need to read the markdown object and then load it into the ReactMarkdown component. Common methods of doing this use fetch as an intermediary. For example:

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>
  );
}

Working example: https://codesandbox.io/s/reactmarkdown-example-20vmg