Taro RichText H5模式下正确的使用方式
1.Taro的RichText官方的使用方式,有些简洁,一上来只知道把后端传过来的html文本塞到nodes里,然后查看效果的时候一脸懵逼。
哈哈哈怎么回事,说好的展示富文本呢
2.后面就想到Taro是基于React实现的,那我能不能绕过Taro,直接使用React的方式展示富文本呢,后面就是漫长的搜索时间,知道找到了react提供了dangerouslySetInnerHTML属性,可以在元素中展示html代码,结果跟使用RichText的结果一样。
3.然后我查看后台传给我的实际文本
<ddclass="job_bt"><p>1、有移动互联网项目经验或者互联网行业开发经验。 </p><p>2、扎实的java编程基础,精通IO、多线程、集合等基础框架,熟悉SOA架构的相关技术; </p><p>3、熟悉spring、spring boot、spring cloud开源框架,并对其源码有研究,对框架本身有过开发或重构者可优先考虑; </p><p>4、必须熟练应用Spring boot,掌握服务治理、服务容错、API网管的概念和具体实施步骤优先; </p><p>5、至少5年左右工作经验, 必须具备项目实施经验,具有解决疑难问题的能力,有项目实施经验; </p><p>6、熟悉缓存、消息、据存储相关技术,例如:redis、memcached、ActiveMQ、Rabbitmq、elasticsearch </p><p>
才想到后台为了网络传输过程数据的安全,这些都是被转译的html代码所以后面本能的想到了反转译一下,然后就能正确展示了,最后我没有用Taro提供的RichText组件,而是自己自定义的,下面就是我项目中的代码
正确代码//HTML反转义
HTMLDecode = (text) =>{
var temp = document.createElement("div");
temp.innerHTML = text; var output = temp.innerText || temp.textContent;
temp = null; return output;
}
核心代码的话就上面这句,供大家参考啦