如何在 React 中将 Markdown 文件作为 this.props 传递？

Question

我正在使用 Redux 在 React 中构建一个站点，我的目标是拥有一个 /pages 文件夹，其中包含代表页面内容的降价文件。

我有一个 React 容器（智能）和一个 React 组件（哑），它们将用于呈现内容。我的想法是我将 Markdown 文件导入到父容器中，然后将它们传递给子组件以在浏览器中呈现它们。我知道我需要使用 markdown-it 之类的东西将 MD 转换为 HTML，也许我需要在子组件中使用它。

我的问题是：

1) 如何使用 this.props 将 markdown 文件从父级传递给子级？ 2）我在正确的轨道上吗？这是正确的做法吗？

这是我的组件：

页面父容器

import React from 'react'
import SamplePage from './../components/SamplePage'

export default class Page extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <section>
        <SamplePage />
      </section>
    )
  }
}

SamplePage 子组件

import React from 'react'
import { Link } from 'react-router'

export default class SamplePage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className="page-container">
        <Link to="/" className="previous-link">Go Back Home</Link>

        // I want to render the MD here using {this.props.markdown}

      </div>
    )
  }
}

Answer 1

一些事情：

1) 我建议使用Markdown to JSX parser 来确保您的模板安全（否则您可能不得不使用dangerouslySetInnerHtml）

2) 我会在构建期间运行这个解析器，所以一切都准备好了。如果您使用的是 webpack 或 browserify，您可以添加自定义加载器/转换器函数来查找所需的 *.md 文件并通过解析器运行它。

3) 解析后的 markdown 是简单的 JSX，可以像上面所做的那样被要求并放入现有组件中。