您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何从React组件渲染Markdown?

如何从React组件渲染Markdown?

您可以使用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有两个很好的选择:

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

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

其他 2022/1/1 18:15:04 有514人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶