web-dev-qa-db-fra.com

Comment rendre Markdown à partir d'un composant React?

J'ai ma documentation écrite en Markdown et je voudrais rendre ces fichiers à partir de mon code JSX (ES6 + CommonJS) dans les composants React. Comment puis-je y parvenir?

Par exemple, j'ai styles.markdown et je voudrais le rendre dans un <p> tag.

javascriptreactjsmarkdown
33
thevangelist

Il suffit de créer un simple composant React qui enveloppe un appel à un analyseur Markdown. Il y en a deux très bons pour JavaScript:

Vous pouvez maintenant créer un composant comme celui-ci:

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

Il y en avait déjà un, mais il ne semble plus être maintenu: https://github.com/tcoopman/markdown-react

De plus, si vous avez besoin d'un React Markdown Editor, consultez: react-mde . Avertissement: je suis l'auteur.

48
André Pena

Le paquet react-markdown avec le composant Markdown sera le bon choix:

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

var src = "# Load the markdown document"

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

Exemple de composant Markdown qui restitue du code HTML à partir du texte de Markdown, la logique de chargement des données doit être implémentée dans un magasin/composant parent/autre. J'utilise marqué package pour convertir le démarque en 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: ''
};
9
Yevgen Safronov

Je suis un peu en retard à la fête, mais j'ai écrit une bibliothèque de concurrents à celles mentionnées ci-dessus qui a l'avantage supplémentaire de ne pas avoir besoin du hack dangerouslySetInnerHtml: https://github.com/ probablement up/markdown-to-jsx

6
probablyup

Essayez quelque chose comme ceci:

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

Ou si vous utilisez les fonctionnalités ES7 +:

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

Vous devrez utiliser la transformation brfs pour pouvoir utiliser fs.readFileSync si cela s'exécute côté client.

5
kpimov