dangerouslySetInnerHTMl 属性

很多时候我们做一个项目接口会返回一段 HTML 字符串文本,然后我们把它解析渲染成正常的html,这是在项目中常见不能再常见的情况了,可是在 react 里边就有一个小小的插曲,在这里分享给同学们;

由于react 项目中是 JSX 语法,JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,本人就遇到了这样的问题,(还是渲染这段代码字符串文本,并没有解析)

解决: 

  1. <div dangerouslySetInnerHTML = {{__html:返回的html代码片段}} ></div>

原理:

1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM,又可以插入字符串;

React 如何正常渲染一段HTML字符串的更多相关文章

  1. react服务端渲染(同构)

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...

  2. (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  3. React 避免重渲染

    组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...

  4. React条件性渲染

    React条件性渲染的方式和Vue是不同的,之前用vue做项目时觉得vue是在是强大,通过v-if就可以选择性的渲染组件,另外,对于列表的渲染更是方便,一个v-for就可以进行快速的渲染,但是Reac ...

  5. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  6. Electron结合React,在渲染进程中使用 node 模块

    Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...

  7. react服务端渲染框架

    客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 ...

  8. React 服务端渲染最佳解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  9. react服务端渲染

    一.服务端渲染的好处 1.SEO, 让搜索引擎更容易读取页面内容: 2.首屏渲染速度更快(重点),无需等待JS文件下载执行过程: 3.更易于维护,服务端和客户端可以共享某些代码: 二.实现原理 服务端 ...

随机推荐

  1. SpringBoot(一)初遇

    环境: IDEA 2018.1.3 , jdk 1.8 , maven 3.3.9 零 第一次接触springboot, 如何学习比较困惑, 思前想后最后决定从文档来学习, 以下为学习中的参考资料: ...

  2. python Django Ajax基础

    升级版: ajax 创建多对多以及增加示例: views中的接收

  3. Git 小记

    感觉用github管理自己平时的一些代码挺方便的,尤其还有各种统计,作为一个码农,就有一种每日签到.累计签到统计的感觉.用github,学习git自然是不可避免的,原先只是用几个 git clone  ...

  4. 镶嵌数据集 Mosaic Dataset 的常见数据组织方式

    镶嵌数据集是ESRI公司推出一种用于管理海量影像数据的数据模型,定义在GeoDatabase数据模型中. 它的常见数据组织方式有两种: 1. 源镶嵌数据集 Source Mosaic Dataset ...

  5. 矩阵分解---QR正交分解,LU分解

    相关概念: 正交矩阵:若一个方阵其行与列皆为正交的单位向量,则该矩阵为正交矩阵,且该矩阵的转置和其逆相等.两个向量正交的意思是两个向量的内积为 0 正定矩阵:如果对于所有的非零实系数向量x ,都有 x ...

  6. 自定义标签+阻尼动画+圆角图片+titleBar随滑动渐隐和显示

    写这个小Demo,也是因为刚好手里没什么事然后看到很多朋友还在好奇这个阻尼界面效果,还有自定义标签,其实这个标签因为现在Google已经有推出更好使用的东西可以替代,那就是“FlexboxLayout ...

  7. Postman Postman接口测试工具使用简介

    Postman接口测试工具使用简介 by:授客 QQ:1033553122 本文主要是对Postman这个接口测试工具的使用做个简单的介绍,仅供参考. 插件安装 1)下载并安装chrome浏览器 2) ...

  8. Android 开发中三种多线程

    在开发工程中线程可以帮助我们提高运行速度,Android开发中我知道的线程有四个一个是老生长谈的Thread,第二个是asyncTask,第三个:TimetTask,第四个是Looper,四个多线程各 ...

  9. 使用 NGINX 进行微程序缓存的好处

    [编者按]本文作者为 Owen Garrett,主要介绍使用 nginx 进行微程序缓存的好处,辅之以生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现. NGINX 和 NGINX ...

  10. elipse安装php

    在用eclipse作为PHP的开发IDE工具时,如果下载的Eclipse不带有PHP功能,则需要我们自己来给Eclipse升级.不过也可以下载eclipseForPHP 在Eclipse的help菜单 ...