Come si esegue il rendering di Markdown da un componente React?

Question

Ho la mia documentazione scritta in markdown e vorrei rendere quei file dal mio codice JSX (ES6 + CommonJS) in componenti React. Come posso raggiungere questo obiettivo?

Ad esempio, ho styles.markdown e mi piacerebbe renderlo in un tag <p>.

Answer 1

Basta creare un semplice React componente che avvolge una chiamata a un parser Markdown. Ci sono due quelli molto buone per JavaScript:

• Remarkable
• Marked

Ora è possibile creare un componente come questo:

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}} />; 
    } 
}); 

Ci

usato per avere già uno, ma non sembra più essere mantenuto: https://github.com/tcoopman/markdown-react

Inoltre, se è necessario un editor React Markdown, eseguire il check-out: react-mde. Disclaimer: I am the author.

Answer 2

provare qualcosa di simile:

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); 

Oppure, se si sta utilizzando ES7 + caratteristiche:

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); 

Avrete bisogno di usare il brfs trasformazione per essere in grado di utilizzare fs.readFileSync se questo è in esecuzione sul lato client.

Answer 3

Esempio di componente Markdown che esegue il rendering di html dal testo di markdown, la logica di caricamento dei dati deve essere implementata in un archivio separato/componente principale/altro. Sto usando il pacchetto marked per convertire 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: '' 
}; 

Answer 4

Il pacchetto react-markdown con Markdown componente sarà buona scelta:

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

Sono un po 'in ritardo alla festa, ma ho scritto una libreria concorrente di quelli di cui sopra che ha un vantaggio di non aver bisogno del dangerouslySetInnerHtml mod: https://github.com/probablyup/markdown-to-jsx