Question

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

我有一个React Container（智能）和一个React Component（哑），它将用于呈现内容。我的想法是我将markdown文件导入父容器并将它们传递给子组件以在浏览器中呈现它们。我知道我需要使用像markdown这样的东西将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）解析后的降价就是简单的JSX，可以是必需的＆amp;如上所述，您已放入现有组件。

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

1 个答案: