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

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

总结