通过自定义组件反应渲染 *.md

Question

通过react-markdown模块渲染降价数据很容易。但是我无法通过自定义 MarkdownPage 组件渲染所有 *.md 文件：

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

但路由不起作用，*.md-文件按原样在浏览器中打开。

我期望此文件将作为数据通过 props 提供给组件，以执行类似的操作：

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

我怎样才能做到这一点？

Answer 1

一种方法是对 .md 文件或 JSON 包含降价字符串的 GET 请求。这是一个例子：

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>

使用 React 路由器：

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

然后在你的组件中：

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

通过自定义组件反应渲染 *.md

React render *.md via custom component

markdown

reactjs