如何从 React 组件渲染 Markdown?
How do I render Markdown from a React component?
我的文档是用 markdown 编写的,我想将这些文件从我的 JSX (ES6+CommonJS) 代码渲染到 React 组件中。我怎样才能做到这一点?
例如,我有 styles.markdown,我想将其呈现为 <p>
标签。
尝试这样的事情:
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。
从 Markdown 文本呈现 html 的 Markdown 组件示例,加载数据的逻辑应在单独的 store/parent component/whatever 中实现。我正在使用 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: ''
};
您可以使用 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。免责声明:我是作者。
包含 Markdown
组件的包 react-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>
可以为 link-urls 和 image-urls 等指定转换器。
我来晚了一点,但我写了一个与上面提到的库竞争的库,它有一个额外的好处,即不需要 dangerouslySetInnerHtml
hack:https://github.com/probablyup/markdown-to-jsx
我的文档是用 markdown 编写的,我想将这些文件从我的 JSX (ES6+CommonJS) 代码渲染到 React 组件中。我怎样才能做到这一点?
例如,我有 styles.markdown,我想将其呈现为 <p>
标签。
尝试这样的事情:
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。
从 Markdown 文本呈现 html 的 Markdown 组件示例,加载数据的逻辑应在单独的 store/parent component/whatever 中实现。我正在使用 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: ''
};
您可以使用 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。免责声明:我是作者。
包含 Markdown
组件的包 react-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>
可以为 link-urls 和 image-urls 等指定转换器。
我来晚了一点,但我写了一个与上面提到的库竞争的库,它有一个额外的好处,即不需要 dangerouslySetInnerHtml
hack:https://github.com/probablyup/markdown-to-jsx