您可以使用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带有Markdown组件的包将是不错的选择：

import React from 'react'
import Markdown from 'react-markdown'
    
var src = "# This is markdown document"
    
React.render(
  <Markdown children={src} />,
  document.getElementById('root')
)

您可以在此处编写就地文档，如下所示：

<Markdown>
  # Header

  * dotted lists
  * [url](/doc)
</Markdown>

可以为链接 url 和图像 url 等指定转换器。

从 Markdown 文本呈现 html 的 Markdown 组件示例，加载数据的逻辑应该在单独的存储/父组件/任何东西中实现。我正在使用标记包将 Markdown 转换为 html。

import React from 'react';
import marked from 'marked';

export default class MarkdownElement extends React.Component {
  constructor(props) {
    super(props);

    marked.setOptions({
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: true,
      smartLists: true,
      smartypants: false
    });
  }
  render() {
    const { text } = this.props,
      html = marked(text || '');

    return (<div>
      <div dangerouslySetInnerHTML={{__html: html}} />
    </div>);
  }
}

MarkdownElement.propTypes = {
  text: React.PropTypes.string.isRequired
};

MarkdownElement.defaultProps = {
  text: ''
};

我参加聚会有点晚了，但我为上面提到的那些写了一个竞争对手库，它有一个不需要dangerouslySetInnerHtml黑客的额外好处：https : //github.com/probablyup/markdown-to-jsx