dangerouslySetInnerHTMl 属性

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

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

解决: 

<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. 【java基础】 == 和 equals() 的区别

    ==号和equals()方法都是比较是否相等的方法,那它们有什么区别和联系呢? 首先,==号在比较基本数据类型(指的值类型)时比较的是值,而用==号比较两个对象时比较的是两个对象的地址值: int x ...

  2. Ubuntu OpenJDK + Tomcat7 的安装

    jdk1.7.0安装首先安装openjdk,安装命令如下图. 安装好之后检查jdk文件路径,如下图. 建立链接(ls),如下图. 成功之后,配置环境变量,并重新运行一下,如下图. 环境变量在文件最后面 ...

  3. js dictionary字典 遍历

    var dic={A:"AA",B:"BB",C:"CC"} //不能length去for循环(length:undefined) dic[ ...

  4. Django随笔

    入门 小Demo设计介绍 本示例完成“图书-英雄”信息的维护,需要存储两种数据:图书.英雄 图书表结构设计: 表名:BookInfo 图书名称:btitle 图书发布时间:bpub_date 英雄表结 ...

  5. MySql 缓存查询原理与缓存监控 和 索引监控

    MySql缓存查询原理与缓存监控 And 索引监控 by:授客 QQ:1033553122 查询缓存 1.查询缓存操作原理 mysql执行查询语句之前,把查询语句同查询缓存中的语句进行比较,且是按字节 ...

  6. NLS_LANG引起的SQLPLUS乱码和length长度不正确.

    创建一个实验表语句如下 SQL> create table test(id number,name varchar2(10)); 当我们在SQLPLUS里面敲入下面的语句并回车执行的时候,SQL ...

  7. 浅谈 java 反射机制

    一:Java反射概念 Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其mod ...

  8. zabbix使用问题

    1中文乱码 https://www.linuxidc.com/Linux/2017-08/146162.htm 软件 说明 备注 zabbix 3.4.7 操作系统 Centos7 问题描述:图表内容 ...

  9. cookie 常用的几种方法

    { setCookie: function(sName, sValue, oExpires, sPath, sDomain, bSecure) { var sCookie = sName + &quo ...

  10. [翻译] UIGlossyButton

    UIGlossyButton https://github.com/waterlou/UIGlossyButton Feature create standard iPhone buttons wit ...