Wie rende ich Markdown von einer React-Komponente?

Question

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

Zum Beispiel habe ich styles.markdown und ich möchte es in ein <p>-Tag rendern.

Answer 1

Erstellen Sie einfach eine einfache Komponente reagieren, die einen Anruf an einen Markdown-Parser wickelt. Es gibt zwei sehr gute für JavaScript:

• Remarkable
• Marked

Jetzt können Sie eine Komponente wie folgt 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}} />; 
    } 
}); 

verwendet Es gibt einen bereits zu haben, aber es scheint nicht mehr gepflegt zu werden: https://github.com/tcoopman/markdown-react

Wenn Sie einen React Markdown Editor benötigen, überprüfen Sie auch: react-mde. Haftungsausschluss: Ich bin der Autor.

Answer 2

versuchen, etwas wie folgt aus:

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 werden verwenden, müssen die brfs verwandeln können fs.readFileSync verwenden, wenn Dies läuft clientseitig.

Answer 3

Beispiel für Markdown-Komponente, die HTML aus Abschrift Text rendert, sollte die Logik des Ladens von Daten in separaten Speicher/Mutterkomponente/was auch immer implementiert werden. Ich benutze marked Paket zum Konvertieren von Abschriften 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: '' 
}; 

Answer 4

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

import React from 'react' 
import Markdown from 'react-markdown' 

var src = "# Load the markdown document" 

React.render(
    <Markdown source={src} />, 
    document.getElementById('root') 
); 

Answer 5

ich ein wenig spät, um die Partei bin, aber ich schrieb kein Konkurrent Bibliothek zu den oben erwähnten, dass diejenigen, hat einen zusätzlichen Vorteil Benötigen Sie die dangerouslySetInnerHtml hack: https://github.com/probablyup/markdown-to-jsx