Wie rendere ich Markdown aus einer React-Komponente?

Question 1

Ich habe meine Dokumentation in Markdown geschrieben und möchte diese Dateien aus meinem JSX-Code (ES6 + CommonJS) in React-Komponenten rendern. Wie kann ich das erreichen?

Zum Beispiel habe ich styles.markdown und ich möchte es in a rendern <p> Schild.

Question 2

Sie können verwenden Reagieren-Markdown:

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input="# This is a header\n\nAnd this is a paragraph"

ReactDOM.render(<ReactMarkdown source={input} />, document.getElementById('container'))

Oder … Sie können einfach eine einfache React-Komponente erstellen, die einen Aufruf an einen Markdown-Parser umschließt. Es gibt zwei sehr gute für JavaScript:

Jetzt können Sie eine Komponente wie diese erstellen:

var MarkdownViewer = React.createClass({
    render: function() {
        // pseudo code here, depends on the parser
        var markdown = markdown.parse(this.props.markdown);
        return <div dangerouslySetInnerHTML={{__html:markdown}} />;
    }
});

Früher gab es schon einen, aber es scheint nicht mehr gepflegt zu werden: https://github.com/tcoopman/markdown-react

Wenn Sie einen React Markdown Editor benötigen, schauen Sie sich auch Folgendes an: Reaktionsmodus. Haftungsausschluss: Ich bin der Autor.

Question 3

Das Paket react-markdown mit Markdown Komponente wird eine gute Wahl sein:

import React from 'react'
import Markdown from 'react-markdown'
    
var src = "# This is markdown document"
    
React.render(
  <Markdown children={src} />,
  document.getElementById('root')
)

Sie können hier-Dokumente wie folgt schreiben:

<Markdown>
  # Header

  * dotted lists
  * [url](/doc)
</Markdown>

Es ist möglich, Transformer für Link-URLs und Bild-URLs und vieles mehr anzugeben.

Question 4

Ich bin etwas spät zur Party, aber ich habe eine Konkurrenzbibliothek zu den oben genannten geschrieben, die den zusätzlichen Vorteil hat, dass ich sie nicht benötige dangerouslySetInnerHtml hacken: https://github.com/probablyup/markdown-to-jsx

Question 5

Beispiel einer Markdown-Komponente, die HTML aus Markdown-Text rendert, die Logik zum Laden von Daten sollte in einem separaten Store/einer übergeordneten Komponente/was auch immer implementiert werden. ich benutze markiert Paket zum Konvertieren von Markdown in HTML.

import React from 'react';
import marked from 'marked';

export default class MarkdownElement extends React.Component {
  constructor(props) {
    super(props);

    marked.setOptions({
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: true,
      smartLists: true,
      smartypants: false
    });
  }
  render() {
    const { text } = this.props,
      html = marked(text || '');

    return (<div>
      <div dangerouslySetInnerHTML={{__html: html}} />
    </div>);
  }
}

MarkdownElement.propTypes = {
  text: React.PropTypes.string.isRequired
};

MarkdownElement.defaultProps = {
  text: ''
};

Question 6

Versuchen Sie so etwas:

import fs from 'fs';
import React, { Component, PropTypes } from 'react';

class Markdown extends Component {
    constructor() {
        super(props);
        this.state = { contents: '' };
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
        const contents = fs.readFileSync(this.props.path, 'utf8');
        this.setState({ contents });
    }

    render()
        return (
            <div>
                {this.state.contents.split('\n').map((line, i) =>
                    line ? <p key={i}>{line}</p> : <br key={i} />)}
            </div>
        );
    }
}

Markdown.propTypes = { path: PropTypes.string.isRequired };

React.render(<Markdown path="./README.md" />, document.body);

Oder wenn Sie ES7+-Funktionen verwenden:

import fs from 'fs';
import React, { Component, PropTypes } from 'react';

class Markdown extends Component {
    static propTypes = { path: PropTypes.string.isRequired };

    state = { contents: '' };

    componentDidMount = () => {
        const contents = fs.readFileSync(this.props.path, 'utf8');
        this.setState({ contents });
    };

    render() {
        return (
            <div>
                {this.state.contents.split('\n').map((line, i) =>
                    line ? <p key={i}>{line}</p> : <br key={i} />)}
            </div>
        );
    }
}

React.render(<Markdown path="./README.md" />, document.body);

Sie müssen die verwenden brfs transformieren, um fs.readFileSync verwenden zu können, wenn dies clientseitig ausgeführt wird.