Question

如何将.md降价文件加载到react组件中？我通过谷歌搜索尝试了这么多npm库，我找不到一个好的解决方案。

我想加载.md文件，如：

render() {
    <div>
        <MarkDown src="about.md" />
    </div>
}

Answer 1

我使用marked（GitHub）。

我首先像这样导入它：

import marked from "marked";

然后我在React的componentDidMount事件中获取我的* .md文件，并使用marked(text)将其存储在组件的状态中（其中text是响应）：

componentDidMount() {
  const readmePath = require("./Readme.md");

  fetch(readmePath)
    .then(response => {
      return response.text()
    })
    .then(text => {
      this.setState({
        markdown: marked(text)
      })
    })
}

...最后我使用dangerouslySetInnerHTML属性在页面上渲染它：

render() {
  const { markdown } = this.state;

  return (
    <section>
      <article dangerouslySetInnerHTML={{__html: markdown}}></article>
    </section>
  )
}

Answer 2

使用react-markdown的完整示例：

import React, { Component } from 'react'
import ReactMarkdown from 'react-markdown'
import termsFrPath from './Terms.fr.md'

class Terms extends Component {
  constructor(props) {
    super(props)

    this.state = { terms: null }
  }

  componentWillMount() {
    fetch(termsFrPath).then((response) => response.text()).then((text) => {
      this.setState({ terms: text })
    })
  }

  render() {
    return (
      <div className="content">
        <ReactMarkdown source={this.state.terms} />
      </div>
    )
  }
}

export default Terms

Answer 3

与@Xing-Han-Lu 的回答类似，但对 Markdown 做出反应。该概念使用 useEffect 加载文件，然后使用 useState 钩子将其添加到状态，reactMarkdown

import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import file from "./md/posts.md";

export default function () {
  const [markdown, setMarkdown] = useState("");

  useEffect(() => {
    fetch(file)
      .then((res) => res.text())
      .then((text) => setMarkdown(text));
  }, []);

  return (
    <>
      <ReactMarkdown source={markdown} />
    </>
  );
}

Answer 4

您应该使用react-markdown而不是accepted answer，此解决方案不使用test。

App.js

dangerouslySetInnerHTML

App.md

import React, { Component } from 'react';
import AppMarkdown from './App.md';
import ReactMarkdown from 'react-markdown';

class App extends Component {

  constructor() {
    super();
    this.state = { markdown: '' };
  }

  componentWillMount() {
    // Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below.
    fetch(AppMarkdown).then(res => res.text()).then(text => this.setState({ markdown: text }));
  }

  render() {
    const { markdown } = this.state;
    return <ReactMarkdown source={markdown} />;
  }
}

export default App;

Answer 5

我稍微修改了这个 solution 以使用钩子和 useEffect（与 componentWillUpdate 不同但仍然有效）。如果您使用 create-react-app 构建您的应用，并且您有一个名为 document.md 的降价文档，您可以通过以下方式构建您的应用：

import { useState, useEffect } from 'react';
import Markdown from 'markdown-to-jsx';
import mdDocument from './document.md';

const App = () => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch(mdDocument)
      .then(res => res.text())
      .then(md => { setContent(md) })
  })

  return (
    <div><Markdown children={content} /></div>
  )
}

export default App;

Answer 6

使用 webpack loader 的方法

安装raw-loader

npm install raw-loader --save-dev

更新webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      // ...
      {
        test: /\.md$/,
        use: "raw-loader",
      },
    ],
  },
};

创建降价文件（比如App.md）

# React & Markdown App

- Benefits of using React... but...
- Write layout in Markdown!

导入 App.md 并在 React 组件中使用它。

import React from "react";
import ReactMarkdown from 'react-markdown';
import AppMarkdown from './App.md';

function App() {
  return (
    <div>
      <ReactMarkdown children={`${AppMarkdown}`} />
    </div>
  );
}

export default App;

Answer 7

markdown-to-jsx提供了非常有效的功能，可以与React组件中的markdown交互。

它允许用您的自定义组件{/ {3}}替换/覆盖任何HTML元素。

import React, { Component } from 'react'
import Markdown from 'markdown-to-jsx';
import README from './README.md'

class PageComponent extends Component {
  constructor(props) {
    super(props)

    this.state = { md: "" }
  }

  componentWillMount() {
    fetch(README)
      .then((res) => res.text())
      .then((md) => {
        this.setState({ md })
      })
  }

  render() {

    let { md } = this.state

    return (
      <div className="post">
        <Markdown children={md}/>
      </div>
    )
  }
}

export default PageComponent

Answer 8

我尝试了以上建议，并在运行命令后推论出了

> npm install markdown

import ReactMarkdown from 'markdown';

它终于对我有用

Answer 9

对于打字稿+反应，请按照以下步骤操作：

在项目目录之一中创建一个类型定义（ index.d.ts ）文件，然后输入以下代码。

--unsafely-treat-insecure-origin-as-secure

添加declare module "*.md";如下

tsconfig.json -> CompilerOptions -> typeRoots

安装两个库showdown和html-react-parser

{ "compilerOptions": { ... "typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"], ... } }或yarn add showdown

npm install showdown或yarn add html-react-parser

在您的组件中

npm install html-react-parser

Answer 10

如果您使用Webpack（即Electron React Boilerplate），则可以使用Webpack加载程序节省一些步骤。

npm i -D html-loader markdown-loader marked

在webpack.config.renderer.dev.js中：

import marked from 'marked';
const markdownRenderer = new marked.Renderer();

....

  // Markdown
  {
    test: /\.md$/,
    use: [
      {
        loader: 'html-loader'
      },
      {
        loader: 'markdown-loader',
        options: {
          pedantic: true,
          renderer: markdownRenderer
        }
      }
    ]
  }

然后，在React组件中，这只是一个必要条件并设置HTML。

import knownIssues from '../assets/md/known-issues.md';
....
<p dangerouslySetInnerHTML={{ __html: knownIssues }} />

最后，在导入降价文件时，Flow将报告一个错误（仍然有效）。将此添加到.flowconfig中以使Flow将md文件视为字符串资产（Webpack的维护）：

module.name_mapper.extension='md' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'

如何将markdown文件加载到react组件中？

10 个答案:

使用 webpack loader 的方法