react 將字符串解析為markdown

react 中有許多組件支持把字符串轉化為markdown，並以html的形式展示出來。這里我試用了 react-markdown 和 hyperdown 兩個庫，發現hyperdown比較好，因為react-markdown不能解析<br>標簽。其他的還有markdown-it等

 

1、react-markdown組件：

https://www.npmjs.com/package/react-markdown

https://www.jianshu.com/p/91c360d96e44

安裝：

npm install --save react-markdown

使用：

es5語法

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')
 
const input = '# This is a header\n\nAnd this is a paragraph'
 
ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)

es6語法的話把 require換成import即可

import ReactMarkdown from 'react-markdown';

 

2、hyperdown組件：

https://github.com/SegmentFault/HyperDown.js

 

3、markdown效果測試文本

測試文件：

import React from 'react';
import ReactMarkdown from 'react-markdown/with-html';
// import marked from 'marked';
// import hljs from 'highlight.js';

class Test extends React.Component{
  // componentDidUpdate(){
    // console.log('==========================id:',this.props.match.params.docId);
    // console.log('==========================id:',this.props.match.params.dirId);
  // }

  render(){
    const markdown = '## 只求極致222\n' +
      '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
      '> Mditor 是一個簡潔、易於集成、方便擴展、期望舒服的編寫 markdown 的編輯器，僅此而已... \n' +
       '**這是加粗的文字**\n' +
      '*這是傾斜的文字*`\n' +
      '***這是斜體加粗的文字***\n' +
      '~~這是加刪除線的文字~~ \n'+
      '> aaaaaaaaa\n' +
      '>> bbbbbbbbb\n' +
      '>>> cccccccccc\n'+
      '***\n' +
      '*****';

    return (
      <div>
        <ReactMarkdown source={markdown} />
      </div>
    );
  }
}

export default Test;

效果圖：

渲染不出效果可能是因為css沖突

 

4、react中將字符串渲染成html

渲染字符串：
<div dangerouslySetInnerHTML={{__html: "<p>這里是自己要渲染的數據內容</p>"}} />


渲染字符串變量：
<div className="detailImgWrap" dangerouslySetInnerHTML={{ __html: mystring }}></div>
--------------------- 
作者：池中飛雪 
來源：CSDN 
原文：https://blog.csdn.net/lianwenxiu/article/details/81479517 
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！