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> ;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。