[解決済み] ReactコンポーネントからMarkdownをレンダリングするにはどうすればいいですか？

質問

私はマークダウンで書かれた私のドキュメントを持っており、私は私のJSX（ES6+CommonJS）コードからReactコンポーネントにそれらのファイルをレンダリングしたいと思います。どうすればこれを実現できますか？

例えば、styles.markdownがあり、それをレンダリングして <p> タグを使用します。

解決方法は？

を使用することができます。 React-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'))

または... Markdownパーサーの呼び出しをラップしたシンプルなReactコンポーネントを作成することができます。 JavaScriptには2つの非常に優れたものがあります。

• 注目すべき点
• マーク

さて、このようにコンポーネントを作成することができます。

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

以前はすでにあったのですが、もうメンテナンスされていないようです。 https://github.com/tcoopman/markdown-react

また、React Markdown Editorが必要な場合は、チェックしてみてください。 react-mde . 免責事項：私は著者です。