B类项目实训-markdown导航动态生成

在前端编辑渲染markdown文件并动态生成导航。

渲染markdown

在这里使用react-markdown库中的ReactMarkdown渲染markdown。

react-markdown：https://github.com/remarkjs/react-markdown

首先在项目中引入ReactMarkdown组件，gfm用于渲染markdown中的表格以及删除线等组件。引入github-markdown-css作为markdown的前端样式（也可以自定义样式表）

remark-gfm：https://github.com/remarkjs/remark-gfm

import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import 'github-markdown-css/github-markdown.css'

<ReactMarkdown remarkPlugins={
   [gfm]} className='markdown-body'>
	{
   this.state.markdown}
</ReactMarkdown>

在ReactMarkdown中传入gfm作为remarkPlugins，设置类名为markdown-body以应用github-markdown-css，在组件中传入markdown内容。这里就在组件componentDidMount()方法中请求后端发送markdown数据。

在代码中直接保存markdown源文本时要做转义。

编辑markdown

实时编辑只需要一个textarea就能做到。

将markdown内容作为组件state，将textarea的内容设为this.state.markdown，然后绑定onchange方法改变markdown的值，把spellcheck设为false关闭拼写检查。一个简单的markdown编辑器就做好了。

  handleChange = (e)=>{
   
    this.setState({
   
      markdown:e.target.value
    }