如何从React组件渲染Markdown？

  • Z时代
  • 2024-01-10
  • 分类：问答

我的文档以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'))

或者…您可以只创建一个简单的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。免责声明：我是作者。

以上是 如何从React组件渲染Markdown？ 的全部内容， 来源链接： utcz.com/qa/417931.html

回到顶部