React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react将html字符串渲染到页面

react中将html字符串渲染到页面的实现方式

作者:池中飞雪

这篇文章主要介绍了react中将html字符串渲染到页面的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

react将html字符串渲染到页面

在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现:

<div dangerouslySetInnerHTML={{__html: "<p>这里是自己要渲染的数据内容</p>"}} />

实际用法:

<div className="detailImgWrap" dangerouslySetInnerHTML={{ __html:goodsDetailData.skuList[0].storeGoodsProfile}}></div>

react如何正常渲染一段HTML字符串

解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题:

dangerouslySetInnerHTMl 属性

很多时候我们做一个项目接口会返回一段 HTML 字符串文本,然后我们把它解析渲染成正常的html,这是在项目中常见不能再常见的情况了,可是在 react 里边就有一个小小的插曲,在这里分享给同学们;

由于react 项目中是 JSX 语法,JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,本人就遇到了这样的问题,(还是渲染这段代码字符串文本,并没有解析)

解决

原理:

1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM,又可以插入字符串;

<div dangerouslySetInnerHTML = {{__html:返回的html代码}} ></div>

当然我们可以封装成一个函数用于模板渲染的时候进行调用:

function showhtml(htmlString){
    var html = {__html:htmlString};
    return   <div dangerouslySetInnerHTML={html}></div> ;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文