react中将html字符串渲染到页面的实现方式_React_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
其它
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react将html字符串渲染到页面
react中将html字符串渲染到页面的实现方式
更新时间：2022年12月02日 09:57:32 作者：池中飞雪
这篇文章主要介绍了react中将html字符串渲染到页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录react将html字符串渲染到页面react如何正常渲染一段HTML字符串dangerouslySetInnerHTMl 属性解决总结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前后端同构渲染从零开始最小实现react服务器渲染详解一起来学习React元素的创建和渲染React简单介绍
react
html
字符串
渲染
页面
相关文章
详解React 服务端渲染方案完美的解决方案这篇文章主要介绍了详解React 服务端渲染方案完美的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2018-12-12
React 数据获取与性能优化详解这篇文章主要为大家介绍了React 数据获取与性能优化方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪 2022-10-10
ReactDOM 隐藏特性详解这篇文章主要为大家介绍了ReactDOM 隐藏特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪 2022-09-09
React的diff算法核心复用图文详解这篇文章主要为大家介绍了React的diff算法核心复用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪 2022-08-08
react中useState使用:如何实现在当前表格直接更改数据这篇文章主要介绍了react中useState的使用:如何实现在当前表格直接更改数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 2022-08-08
react 可拖拽进度条的实现本文主要介绍了react 可拖拽进度条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2022-04-04
React Hooks之usePolymerAction抽象代码结构设计理念这篇文章主要为大家介绍了React Hooks之usePolymerAction抽象代码结构设计理念，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪 2022-09-09
基于react组件之间的参数传递(详解)下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2017-09-09
react之组件通信详解本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2021-10-10
React-Native中一些常用组件的用法详解(一)这篇文章主要跟大家分享了关于React-Native中一些常用组件的用法，其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法，分别给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。 2017-06-06
最新评论
大家感兴趣的内容
1详解React中传入组件的props改变时更新组件的几种实现2VSCode配置react开发环境的步骤3react-redux中connect的装饰器用法@conn4ReactNative 之FlatList使用及踩坑封装总结5详解React Native开源时间日期选择器组件(reac6react-router browserHistory刷新页7React Native实现简单的登录功能(推荐)8详解React-Router中Url参数改变页面不刷新的解决9ReactNative之键盘Keyboard的弹出与消失示例10react路由守卫的实现(路由拦截)
最近更新的内容
react-router实现按需加载create-react-app修改为多页面支持的方法简单的React SSR服务器渲染实现React ref的使用示例为react组件库添加typescript类型提示的方法浅谈react 16.8版本新特性以及对react开发的影响如何去除富文本中的html标签及vue、react、微信小程序中的过滤器详解React之父子组件传递和其它一些要点深入浅析react native es6语法使用reactjs优化了进度条页面性能提高70%
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2022 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有