• 需求
• 在线预览
• 实现思路
• 其他
• 源码地址

需求

用React实现一个Markdown解析页面，markdown编译可通过marked实现。

在线预览

在线预览

实现思路

这里要求能根据输入的markdown格式文本进行实时预览，可以将程序主体分割为用于输入markdown文本的div(markdown-src)和用于显示文本的div(markdown-des)两部分组成。

1. 定义类MarkdownPreview

   class MarkdownPreview extends React.Component
   

2. 为其设置一个state-value，用于记录输入的文本

   constructor(props){
   super(props);
   this.state = {
    value: '# hello, This is Markdown Live Preview\n\n----\n## what is Markdown?\nsee [Wikipedia](http://en.wikipedia.org/wiki/Markdown)'
   }
   ...
   }
   

3. 需要能够实时预览，可以给页面一个textarea并设定onChanage函数，每次内容改变时都更新vlaue的值

   handleChange(event) {
   this.setState({value: event.target.value});
   }
   ...
   render() {
   return (...
    <textarea type="text" onChange={this.handleChange} value={this.state.value}></textarea>
   ...)
   ...
   

4. 设置一个用于显示输出的文本框

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

5. this绑定-别忘了手动通过bind绑定this

   constructor(props){
   ...
   this.handleChange = this.handleChange.bind(this);
   this.createMarkdownPreview = this.createMarkdownPreview.bind(this);
   ...
   }
   

6. 渲染元素

   ...
   ReactDOM.render(
   <MarkdownPreview />,
   document.getElementById('content')
   );
   ...
   

其他

• React中对class的命名：class在js中是关键字，react中定义标签类名应使用className
• 定义标签中的内容：采用dangerouslySetInnerHTML实现，将一个js对象赋值给dangerouslySetInnerHTML，标签中的html为对象中key为__html的内容

源码地址

代码放在了github上，点击参考->地址

参考链接：
React 入门实例教程
React-菜鸟教程