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

Ответ 1

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

Я сначала импортирую это так:

import marked from "marked";

Затем я извлекаю свой *.md файл в событии React componentDidMount и сохраняю его в состоянии моего компонента, используя 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>
  )
}

Ответ 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

Ответ 3

Вы должны использовать ответную уценку вместо принятого ответа, это решение не использует dangerouslySetInnerHTML.

App.js

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;

App.md

# React & Markdown App
* Benefits of using React... but...
* Write layout in Markdown!

Ответ 4

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

Это позволяет заменить/переопределить любой элемент 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

Ответ 5

Если вы используете 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'

Ответ 6

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

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

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