Wie lade ich eine markdown-Datei in ein reagieren Komponente?

Wie würde ich es laden ein .md markdown-Datei in ein reagieren Komponente? Ich habe versucht, so viele npm-Bibliotheken durch google-suchen und ich kann nicht finden, eine gute Lösung.

Wie lade ich eine markdown-Datei in ein reagieren Komponente?

Ich soll zu laden .md-Datei sowas wie:

render() {
    <div>
        <MarkDown src="about.md" />
    </div>
}
InformationsquelleAutor PizzaHead | 2017-03-21
  1. 29

    Benutze ich markiert (GitHub).

    Ich zuerst importieren Sie es wie folgt:

    import marked from "marked";

    Ich Hole dann meine *.md-Datei innerhalb Reagieren ist componentDidMount Ereignis und speichern es in meiner Komponente Zustand mit marked(text) (wo text ist die Antwort):

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

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

    ...und endlich habe ich es Rendern auf der Seite mit der dangerouslySetInnerHTML Attribut:

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

  return (
    <section>
      <article dangerouslySetInnerHTML={{__html: markdown}}></article>
    </section>
  )
}
    • Versucht zu importieren "markiert" und Typoskript couldnt find declaration-Datei
    • Ich bin nicht vertraut mit TypeScript, aber Sie müssen, um das Paket zu installieren zuerst. npm install marked --save sollte den trick tun.
    • Ah, fand heraus, ich brauchte, um zu installieren, eine Art definition zu machen Typoskript glücklich. npmjs.com/package/@types/marked. Danke, mein Freund
    • Sie müssen auch zu initiieren Staat über konstruieren(Requisiten) - Methode.
    • funktioniert nicht für mich ./src/Seiten/über.md-Modul parse failed: /Users/mir/myproject/src/Seiten/über.md Unerwartetes Zeichen '#' (1:0), benötigen Sie ggf. eine entsprechende loader zum verarbeiten dieser Datei-Typ. SyntaxError: Unexpected character '#' (1:0)
    • Ich möchte laden alle markdown-Dateien in Ordner (nur Vorschau). Irgendein Tipp?
    • Check out stackoverflow.com/a/53975297/7784399 stattdessen. Es wird nicht in der dangerouslySetInnerHTML Attribut.

    InformationsquelleAutor James Donnelly
  2. 18

    Ein voll funktionsfähiges Beispiel mit 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
    InformationsquelleAutor Dorian
  3. 5

    Sollten Sie verwenden reagieren-markdown statt der akzeptierte Antwort, ist diese Lösung nicht verwenden 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!
    InformationsquelleAutor Kevin
  4. 1

    markdown-zu-jsx bietet sehr efficeint Funktionalität für die Interaktion mit markdown in Reagieren Komponente.

    Es ermöglicht das ersetzen/überschreiben von irgendeinem HTML-element mit Benutzerdefinierten Komponente für markdown, hier ist der doc.

    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
    InformationsquelleAutor Nishchit Dhanani
  5. -1

    Wenn Sie Webpack (d.h. Elektronen Reagieren Boilerplate), dann Sie können sparen Sie ein paar Schritte mit Webpack Lader.

    npm i -D html-loader markdown-loader marked

    In 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
        }
      }
    ]
  }

    Dann in das React-Komponente es ist einfach ein verlangen und einstellen der HTML.

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

    Schließlich Fließen wird einen Fehler melden (es funktioniert noch) beim Import die markdown-Datei. Fügen Sie diese auf .flowconfig zu machen, Fließen Behandlung von md-Dateien als string Vermögenswerte (Betreuung von Webpack):

    module.name_mapper.extension='md' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'
    InformationsquelleAutor Caylan Van Larson
Schreibe einen Kommentar