react中将html字符串渲染到页面的实现方式
更新时间：2022年12月02日 09:57:32 作者：池中飞雪
这篇文章主要介绍了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> ;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结，感兴趣的朋友跟随小编一起看看吧2019-05-05
MobX 是一个简洁的状态管理库,它通过透明的函数响应式编程（TFRP）使得状态管理变得简单和可扩展,下面就跟随小编一起来了解一下如何在React函数式组件中使用MobX吧2024-01-01
这篇文章主要介绍了React Hook 父子组件相互调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了详解React服务端渲染从入门到精通，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
本篇文章主要介绍了Parcel 打包示例(React HelloWorld)，详细的介绍了Parcel打包的特点和使用示例，有兴趣的可以了解一下2018-01-01
这篇文章主要介绍了React 18版本配置rem 和 vw的详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
最近看项目中使用了 Redux, 便尝试了解一波 Redux 的设计思想与工作原理,所以本文详细的给大家介绍了Redux设计思想与工作原理,需要的朋友可以参考下2023-09-09
ReactNative之键盘Keyboard的弹出与消失示例
本篇文章主要介绍了ReactNative之键盘Keyboard的弹出与消失示例，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
react hooks d3实现企查查股权穿透图结构图效果详解
这篇文章主要为大家介绍了react hooks d3实现企查查股权穿透图结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
heatmap.js 是一个用于生成热力图的 JavaScript 库,React 是一个流行的 JavaScript 库,用于构建用户界面,本小编给大家介绍了在React 应用程序中使用heatmap.js实现热力图的绘制的示例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
最新评论