Javascript 如何从 React 组件渲染 Markdown？

How do I render Markdown from a React component?

提问by thevangelist

I have my documentation written in markdown and I would like to render those files from my JSX (ES6+CommonJS) code into React components. How can I achieve this?

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

For example I have styles.markdown and I would like to render it into a <p>tag.

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

回答by André Pena

You can use 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'))

Or... You can just create a simple React component that wraps a call to a Markdown parser. There are two very good ones for JavaScript:

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

• Remarkable
• Marked

• 卓越
• 标记

Now, you can create a component like this:

现在，您可以创建这样的组件：

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}} />;
    }
});

There used to have one already, but it doesn't seem to be maintained anymore: https://github.com/tcoopman/markdown-react

曾经有一个，但似乎不再维护了：https: //github.com/tcoopman/markdown-react

Also, if you need a React Markdown Editor, check out: react-mde. Disclaimer: I am the author.

另外，如果您需要 React Markdown 编辑器，请查看：react-mde。免责声明：我是作者。

回答by oklas

The package react-markdownwith Markdowncomponent will be good choice:

react-markdown带有Markdown组件的包将是不错的选择：

import React from 'react'
import Markdown from 'react-markdown'

var src = "# Load the markdown document"

React.render(
    <Markdown source={src} />,
    document.getElementById('root')
);

回答by Yevgen Safronov

Example of Markdown component that renders html from markdown text, the logic of loading data should be implemented in separate store/parent component/whatever. I am using markedpackage for converting markdown to html.

从 Markdown 文本呈现 html 的 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: ''
};

回答by probablyup

I'm a little late to the party, but I wrote a competitor library to the ones mentioned above that has an added benefit of not needing the dangerouslySetInnerHtmlhack: https://github.com/probablyup/markdown-to-jsx

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

回答by kpimov

Try something like this:

尝试这样的事情：

import fs from 'fs';
import React, { Component, PropTypes } from 'react';

class Markdown extends Component {
    constructor() {
        super(props);
        this.state = { contents: '' };
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
        const contents = fs.readFileSync(this.props.path, 'utf8');
        this.setState({ contents });
    }

    render()
        return (
            <div>
                {this.state.contents.split('\n').map((line, i) =>
                    line ? <p key={i}>{line}</p> : <br key={i} />)}
            </div>
        );
    }
}

Markdown.propTypes = { path: PropTypes.string.isRequired };

React.render(<Markdown path='./README.md' />, document.body);

Or if you're using ES7+ features:

或者，如果您使用的是 ES7+ 功能：

import fs from 'fs';
import React, { Component, PropTypes } from 'react';

class Markdown extends Component {
    static propTypes = { path: PropTypes.string.isRequired };

    state = { contents: '' };

    componentDidMount = () => {
        const contents = fs.readFileSync(this.props.path, 'utf8');
        this.setState({ contents });
    };

    render() {
        return (
            <div>
                {this.state.contents.split('\n').map((line, i) =>
                    line ? <p key={i}>{line}</p> : <br key={i} />)}
            </div>
        );
    }
}

React.render(<Markdown path='./README.md' />, document.body);

You'll need to use the brfstransform to be able to use fs.readFileSync if this is running client-side.

如果这是在客户端运行，您将需要使用brfs转换才能使用 fs.readFileSync。