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
版权声明:本文为博主原创文章,转载请附上博文链接!
react 将字符串解析为markdown的更多相关文章
- 生成Markdown目录 字符串解析 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- React Native组件解析(二)之Text
React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...
- JS中将JSON的字符串解析成JSON数据格式《转》
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- 将查询字符串解析转换为泛型List的名值集合.
///<summary> ///将查询字符串解析转换为泛型List的名值集合. ///</summary> ///<param name="queryStrin ...
- 把给定的字符串解析为Date对象
把给定的字符串解析为Date对象: /** * <pre> * 把给定的字符串解析为Date对象 * </pre> * * @param str 要进行解析的字符串 * @pa ...
- js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时
js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...
- parse_str() 函数把查询字符串解析到变量中。
定义和用法 parse_str() 函数把查询字符串解析到变量中. 注释:如果未设置 array 参数,则由该函数设置的变量将覆盖已存在的同名变量. 注释:php.ini 文件中的 magic_quo ...
- JSON字符串解析成JSON数据格式
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- Java8获取当前时间、新的时间日期类如Java8的LocalDate与Date相互转换、ZonedDateTime等常用操作包含多个使用示例、Java8时区ZoneId的使用方法、Java8时间字符串解析成类
下面将依次介绍 Date转Java8时间类操作 ,Java8时间类LocalDate常用操作(如获得当前日期,两个日期相差多少天,下个星期的日期,下个月第一天等) 解析不同时间字符串成对应的Java ...
随机推荐
- jdom 插入 修改 删除
创建XML文档 XML文件是一种典型的树形文件,每个文档元素都是一个document元素的子节点.而每个子元素都是一个Element对象,对象可以向下包含. 1 因此我们可以通过先创建元素再将元素添加 ...
- 基于jQuery的时间轴鼠标悬停动画插件
之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...
- LeetCode -- 推断链表中是否有环
思路: 使用两个节点.slow和fast,分别行进1步和2步.假设有相交的情况,slow和fast必定相遇:假设没有相交的情况,那么slow或fast必定有一个为null 相遇时有两种可能:1. 仅仅 ...
- elasticsearch -- 问题纪录
报错1: [1]: max file descriptors [65535] for elasticsearch process is too low, increase to at least [6 ...
- 绝对详细!Nginx基本配置、性能优化指南
大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了!而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...
- KMP + 求最小循环节 --- HUST 1010 - The Minimum Length
The Minimum Length Problem's Link: http://acm.hust.edu.cn/problem/show/1010 Mean: 给你一个字符串,求这个字符串的最小循 ...
- KMP + 求最小循环节 --- HDU 1358 Period
Period Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=1358 Mean: 给你一个字符串,让你从第二个字符开始判断当前长度 ...
- [velocity] velocity详解
(1)为什么要使用模版语言? 在服务器端可以使用 Velocity 处理模板和生成的动态内容(HTML.XML等).这和 JSP 技术的目标非常接近.但是,JSP 模型可以毫无阻碍地访问底层的 Ser ...
- 多媒体开发之rtsp---rtsp client 端的实现
http://blog.csdn.net/xyz_lmn/article/details/6055179 java实现 http://www.cnblogs.com/wohexiaocai/p/454 ...
- SQL操作【整理中...】
/////////////////////////////////////////////////////////////////////////////////////////////////数据库 ...