如何将减价文件加载到反应组件中？

Question

如何将.md降价文件加载到反应组件中？我已经通过谷歌搜索尝试了很多npm库，我无法找到一个好的解决方案。

我要加载的文件.MD类似：

render() { 
    <div> 
     <MarkDown src="about.md" /> 
    </div> 
} 

Answer 1

我用marked（GitHub）。

我先导入这样的：

import marked from "marked"; 

我再取阵营的componentWillMount事件中我* .MD文件，并使用marked(text)其存储在我的组件的状态（text是响应）：

componentWillMount() { 
    const readmePath = require("./Readme.md"); 

    fetch(readmePath) 
    .then(response => { 
     return response.text() 
    }) 
    .then(text => { 
     this.setState({ 
     markdown: marked(text) 
     }) 
    }) 
} 

...最后我用dangerouslySetInnerHTML属性呈现在页面上：

render() { 
    const { markdown } = this.state; 

    return (
    <section> 
     <article dangerouslySetInnerHTML={{__html: markdown}}></article> 
    </section> 
) 
} 

Answer 2

我建议你使用react-markdown。你可以试试demo。它可以让你写：

var React = require('react'); 
var Markdown = require('react-markdown'); 

React.render(
    <Markdown source="# Your markdown here" />, 
    document.getElementById('content') 
);