如何在反应中导入 markdown 或 HTML 文件

Question

I'm making a Reactjs app and I have a Readme.md markdown file that I would like to show in my app. I'm confused about how to proceed. I'm describing what I tried below but it looks to me more complicated than it should and makes me feel like I'm approaching this wrong. I'd be interested in knowing how people generally deal with including static markdown or html content in a react app or more generally in javascript.

I see multiple paths:

1. Translate the markdown file to html and find a way to include the html in the react App.
2. Use a javascript markdown library (such as maybe https://remark.js.org/ ) to render the markdown directly

The markdown also contains mathjax.

I'd have thought route 1 was the best, because the markdown is a static file and i don't need to use an extra javascript library to render it dynamically.

So I generated the HTML from the Markdown with pandoc, put it in src/assets/readme.html and tried this in my App.js :

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

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

This doesn't work however, as it produces the error:

./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

I checked the pointed URL but couldn't find any pointer to load HTML files.

This looks more complicated than it should, I'm wondering if I'm missing something.

Answer 1

you can check the below code:

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