カスタムコンポーネントでレンダリング* .mdを処理する

Question

react-markdownモジュールを使用してマークダウンデータを簡単にレンダリングできます。しかし、私は、カスタムMarkdownPageコンポーネントを介してすべての*.mdファイルをレンダリング実装カント：

<Route path="*.md" component={MarkdownPage} />

が、ルートはそのままで、ブラウザで開いている仕事と*.md -filesませんでした。

render() { 
    return (
    <h1>Pretty markdown</h1> 
    <Page> 
     <ReactMarkdown source={this.props} /> 
    </Page> 
); 
} 

がどのように私はこれを達成できます。

私のような何かをする、このファイルはpropsを経由してコンポーネントにデータとして提供されることを期待していますか？

Answer 1

.mdファイルまたはmarkdownを文字列として含むJSONのいずれかへのGET要求を使用する方法があります。ここではその一例です：あなたのコンポーネント内に続いて

<Route path="/markdown/:file" component={MarkdownPage} /> 
// Example route: localhost:3000/markdown/x.md 

：

class ReactMarkdown extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { html: '' }; 
 
    } 
 

 
    componentDidMount() { 
 
    fetch(this.props.md) 
 
     .then(response => response.text()) 
 
     .then(markdown => this.setState({ html: marked(markdown) })); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<ReactMarkdown md="https://cdn.rawgit.com/fabe/react-portfolio/master/README.md"/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>

では、ルータに反応

fetch('/' + this.props.params.file)