码迷,mamicode.com
首页 > 其他好文 > 详细

react 将字符串解析为markdown

时间:2019-03-04 20:49:36      阅读:460      评论:0      收藏:0      [点我收藏+]

标签:nbsp   and   www.   rom   图片   import   es6   pack   ons   

react 中有许多组件支持把字符串转化为markdown,并以html的形式展示出来。这里我试用了 react-markdown 和 hyperdown 两个库,发现hyperdown比较好,因为react-markdown不能解析<br>标签。其他的还有markdown-it等

 

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‘;

 

hyperdown组件:

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

技术图片

 

react 将字符串解析为markdown

标签:nbsp   and   www.   rom   图片   import   es6   pack   ons   

原文地址:https://www.cnblogs.com/zealousness/p/10472710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!