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 Fiber 是 React 16 中引入的新的协调引擎或重写的核心算法, 真针Fiber的一个重要的核心概念Fiber Node,这次主要的研究对象是： 如何从使用者/学习 者角度 在js 代码上 拿到fiber 树结构的信息,,需要的朋友可以参考下2024-04-04
这篇文章主要介绍react实现路由拦截的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了React中Recoil状态管理库的使用，Recoil的产生源于Facebook内部一个可视化数据分析相关的应用，在使用React的实现的过程中，因为现有状态管理工具不能很好的满足应用的需求，因此催生出了Recoil，对Recoil感兴趣可以参考下文2023-05-05
这篇文章主要介绍了React引入css的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue中,keep-alive组件可以缓存组件状态,在路由切换时重新挂载,实现这一功能在React中并不简单,但我们可以借助一个第三方库——react-activation 来模拟Vue的keep-alive功能,需要的朋友可以参考下2024-10-10
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了react-pdf实现将pdf文件转为图片,用于页面展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本篇文章主要介绍了ReactNative短信验证码倒计时控件的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
useReducer createContext代替Redux原理示例解析
这篇文章主要为大家介绍了useReducer createContext代替Redux原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论