javascript - 如何从 React 组件渲染 Markdown？

Question

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

例如，我有 styles.markdown，我想将它渲染成 <p>标签。

Answer 1

您可以使用 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'))

或者...您可以只创建一个简单的 React 组件来包装对 Markdown 解析器的调用。有两个非常适合 JavaScript 的:

• Remarkable
• Marked

现在，您可以像这样创建一个组件:

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 .免责声明:我是作者。