Reactjs 如何从 React 组件渲染 Markdown

发布于08月07日

我的文档是用markdown编写的，我想将这些文件从我的JSX(ES6+CommonJS)代码中呈现到React组件中.我怎样才能做到这一点？

例如，我有自己的风格.markdown和我想把它渲染成一个<p>标签.

推荐答案

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

或您只需创建一个简单的React组件，将对标记解析器的调用封装起来.

现在，您可以创建如下组件:

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编辑器，请查看:react-mde.免责声明:我是作者.