我的文档是用markdown编写的,我想将这些文件从我的JSX(ES6 + CommonJS)代码渲染到React组件中。我怎样才能做到这一点?
例如我有styles.markdown,我想将其呈现为<p>
标记。
答案 0 :(得分:47)
只需创建一个简单的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。免责声明:我是作者。
答案 1 :(得分:12)
包含Markdown
组件的react-markdown
包将是不错的选择:
import React from 'react'
import Markdown from 'react-markdown'
var src = "# Load the markdown document"
React.render(
<Markdown source={src} />,
document.getElementById('root')
);
答案 2 :(得分:9)
从markdown文本呈现html的Markdown组件示例,加载数据的逻辑应该在单独的store / parent组件/中实现。我使用marked包将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: ''
};
答案 3 :(得分:4)
尝试这样的事情:
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);
或者,如果您正在使用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);
如果这是在客户端运行,您需要使用brfs转换才能使用fs.readFileSync。
答案 4 :(得分:3)
我参加聚会的时间有点晚了,但是我为上面提到的那些写了一个竞争对手的图书馆,它有一个额外的好处,就是不需要dangerouslySetInnerHtml
hack:https://github.com/probablyup/markdown-to-jsx