reactjs - 如何将 Markdown 文件加载到 React 组件中？

Question

如何将 .md markdown 文件加载到 React 组件中？我通过google搜索尝试了很多npm库，但找不到好的解决方案。

我想加载 .md 文件，例如:

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

Answer 1

使用 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