Как загрузить файл markdown в компонент react?

Как бы я загрузил .файл уценки md в компонент react? Я пробовал так много библиотек npm через поиск google, и я не могу найти хорошее решение.

Code image

Я хочу загрузить .md файл что-то вроде:

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

5 ответов

Я использую С пометкой (GitHub).

Я сначала импортирую его следующим образом:

import marked from "marked";

затем я принесу свой *.md-файл в React's componentWillMount событие и сохранить его в состоянии моего компонента, используя marked(text) (где text ответ):

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

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

...и, наконец, я визуализирую его на странице, используя :

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

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

полный рабочий пример с 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
6

markdown-to-jsx обеспечивает очень функциональность efficeint для взаимодействия с markdown в компоненте React.

Он позволяет заменять / переопределять любой HTML-элемент вашим пользовательским компонентом для markdown,вот док.

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: null }
  }

  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
0

если вы используете Webpack (т. е. Электронная Реакционная Панель) затем вы можете сохранить несколько шагов с помощью загрузчиков Webpack.

npm i -D html-loader markdown-loader marked

в webpack.конфиг.визуализация.разработка.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 сообщит об ошибке (она все еще работает) при импорте файла markdown. Добавьте это .flowconfig, чтобы поток обрабатывал md-файлы как строковые активы (забота о Webpack):

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

Я предлагаю вам использовать react-markdown. Вы можете попробовать демо. Это позволяет написать:

var React = require('react');
var Markdown = require('react-markdown');

React.render(
    <Markdown source="# Your markdown here" />,
    document.getElementById('content')
);
-1