如何在react中渲染foo.md标记文件？

Question

我有几个.md文件(包含长文本)，我想通过react呈现它们。我尝试使用markedown it，但是加载程序返回一个错误。下面是webpack.config.js文件：

var path = require('path');
var webpack = require('webpack');
var subscript = require('markdown-it');
var superscript = require('markdown-it');

module.exports = {
    entry: ['./src/first.jsx'],
    devtool: 'cheap-module-eval-source-map',
    output: { path: __dirname+"/app", filename: 'bundle.js' },
    module: {
        loaders: [
            {   test: /\.jsx?$/,
                loader: 'babel-loader',
                query: { presets: ['es2015', 'react'] },
                include: path.join(__dirname, 'src')
            },
            {   test:   /\.md/,
                loader: 'markdown-it'
            }
        ]
    },
    'markdown-it': {
        preset: 'default',
        typographer: true,
        use: [subscript, superscript]
    }
};

那个文件有什么问题吗？我还能如何将我的*.md文件添加到react？

在阅读了http://www.shoutinginfrench.com/today-i-made-react-load-markdown/之后，我尝试使用markdown-loader。然后，我将其添加到webpack.config文件中：

{   test: /\.md$/,
   loader: "html!markdown"
}

这是没有问题的。然后我尝试将markdown文件添加到react组件中，如下所示：

import React from 'react';
import { Link } from 'react-router'
import markdownFile from './test-file.md';
 export const Test = React.createClass({
    rawMarkup(){
         return { __html: markdownFile };
     },
     render() {
         return (
             <div className="something">
                 <div className="row">
                     <div className="col-10">
                         <div dangerouslySetInnerHtml={this.rawMarkup()} />
                     </div>
                 </div>
             </div>
         );
     }
 });

但是我得到了以下错误：

ERROR in ./src/components/tst.jsx
Module not found: Error: Cannot resolve module 'html' in /Users/..../src/components
 @ ./src/components/tst.jsx 14:15-39

我怎么才能修复它呢？！

Answer 1

将{ test: /\.md$/, loader: "html!markdown" },{ test: /\.json$/, loader: "json" }添加到您的webpack.config.js。

npm install react-markdown --save-dev