react属性dangerouslySetInnerHTML

最新推荐文章于 2023-05-17 00:25:48 发布
最新推荐文章于 2023-05-17 00:25:48 发布
阅读量163 收藏
点赞数 1
文章标签： react.js javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57926178/article/details/130005265
版权

在react项目中，有时候需要将后端返回的html字符串渲染出来，在vue中我们可以用v-html直接插入即可，那么，在react中，也有类似的方法，这个属性就是：dangerouslySetInnerHTML。

接收一个对象具体用法如下：

<div dangerouslySetInnerHTML={{__html: '<a href="">跳转</a>'}}></div>

若是动态数据，即将字符串改为拿到的变量即可。

有路长
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react中dangerouslySetInnerHTML的标签绑定事件
qq_35769971的博客
11-12 2348
react项目中dangerouslySetInnerHTML绑定事件 项目需求：采用富文本编辑器编辑的一段字符串格式的html需进行显示，使用dangerouslySetInnerHTML进行显示，但是这段HTML中包含img标签，希望将这个img标签不要直接显示，而是处理成a标签，点击时再进行图片显示，点击浏览器任意位置，图片不显示。 代码 import React, {useState} from "react"; // reactstrap components import {Modal} fro
如何在React项目中动态插入HTML内容
最新发布
TianXuab的博客
08-17 3427
通过上述步骤，我们就可以在React中使用类似于v-html的功能了。总结起来，React中没有内置的v-html指令，但我们可以通过使用dangerouslySetInnerHTML属性来实现类似的功能。在上面的代码中，我们创建了一个名为App的React组件，并在render方法中使用了我们的自定义组件MyComponent。在上面的代码中，我们创建了一个名为MyComponent的React组件，并在render方法中使用了dangerouslySetInnerHTML属性。
react中dangerouslySetInnerHTML的用法
Lwh2004的博客
04-07 943
dangerouslySetInnerHTML相当于react中的一个属性，相当于vue中的v-html和angular中的ng-bind，它可以直接去直接渲染富文本。
React中的dangerouslySetInnerHTML
txl2498459886的博客
10-10 1万+
dangerouslySetInnerHTML，翻译过来就是：危险的设置内部HTML。要知道有这么一句话：“永远不要相信用户的输入”。用户有时候不会按照程序员所设想的规则来进行数据的输入，比如想要用户输入数字，用户却输入的是文本，类似的情况比比皆是。
React中正常显示HTML---dangerousSetInnerHtml
weixin_43134595的博客
02-14 1万+
运行以下代码的时候出现了html的标签, 后在li标签中加上dangerouslySetInnerHTML={{__html:item}}，html的内容得以正常显示 import React, {Component, Fragment} from ‘react’ export default class TodoList extends Component { constructor(pro...
React dangerouslySetInnerHTML api 的介绍与使用
Baron的技术blog
01-05 714
使用场景： 在 react 项目中，当后端接口返回的一个字段里有HTML字符实体的情况下，是不会转换成对应样式的。 比如& g t; 就不会显示成>, < b r > 也不会进行换行。 这时候用 dangerouslySetInnerHTML就可以正常渲染混有 DOM字符串。 举例： <div dangerouslySetInnerHTML = {{ __html: 接口传来的数据}} /> 如果是直接调用渲染接口中的值，则是以上的写法，如果仅仅是显示固定的内容，用如
浅谈React 属性和状态的一些总结
11-28
一、属性 1、第一种使用方法：键值对 <ClaaNameA xss=removed>//数组 <ClaaNameA xss=removed> //定义一个函数 2、第二种方法：三个点的展开对象形式 var props = { one :”123”, tow :321 } 增加三个引号...
3、React绑定属性和事件，以及事件的响应。
01-20
接下来讲讲React的绑定属性和事件，以及事件的响应，这里就不赘述环境的搭建了，环境搭建可以看我前面的文章。(1、React环境搭建，以及初识jsx语法。) 好的，主要分两部分React绑定属性和事件： 1、绑定属性： 我们...
property-grid:React属性网格
06-06
React属性网格 安装 $ npm install --save property-grid 用法 请确保您有一个指向 ReactJS 库的全局React变量！ 基本用法： /** * The onChange function can expect the following params: * @param { Event ...
react-quill的使用
02-25
React-Quill 组件的 props 可以配置富文本编辑器的各种属性，例如 defaultValue、theme 等： ```jsx ref={(el) => { this.reactQuillRef = el }} defaultValue={postRichText} key="1" id="textDiv1" theme=...
dangerouslySetInnerHTML属性
chunchun1230的博客
10-27 641
dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容 import React from 'react'; class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>' } } render() { return ( <div&g
什么时候在在react中使用dangerouslySetInnerHTML
奔跑的小猪仔
05-17 169
由于 React 使用独立于浏览器的系统来操作 DOM 元素，从而防止与 DOM 直接交互。这将使得在所见即所得编辑器中创建的富文本渲染 HTML标签是很困难的。
react实现路由跳转拦截功能（导航守卫）
博哥的二进制世界
06-26 1万+
react实现路由跳转拦截功能背景Prompt组件Prompt组件介绍 背景 最近接到一个需求，当用户将要离开指定页面的时候，需要拦截页面的跳转，并弹出提示框，提醒用户去做某一项操作（比如数据的保存和提交），只有当用户完成操作之后，或者关闭提示窗，才能离开此页面进行下一页面的跳转。 这样的需求，通常做法是：监听路由的跳转操作，阻塞跳转，实现拦截，并在用户处理完需要的操作之后（如数据保存、提交、关闭弹窗），才放开跳转权限，允许用户跳转下一页面。 Prompt组件 如果前端项目是使用vue来编写，我们可以很快处
react中dangerouslySetInnerHTML使用（简洁）
热门推荐
exploringfly的博客
06-05 9万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：&lt;div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /&gt;如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：&lt;div dang...
提升 React 应用的安全性：从这几点入手
bluemoon_0的博客
02-15 458
提升 React 应用的安全性：从这几点入手
react：innerHTML的替代方案dangerouslySetInnerHTML
大香蕉的博客
10-23 2760
通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于。因此，你可以直接在 React 中设置 HTML，但当你想设置。中不仅仅可以设置内容为一个和HTML片段，也可以是一个普通的字符串。是 React 为浏览器 DOM 提供。时，需要向其传递包含 key 为。的对象，以此来警示你。
渲染html字符串格式内容
grow_的博客
12-26 737
dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案，用来在 JSX 中渲染 HTML 格式的字符串内容通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于[跨站脚本（XSS）]的攻击为了安全可以通过类似于 `dompurify` 包，来对 HTML 字符串内容进行“消毒”步骤：1 .安装 dompurify 和 类型声明文件：npm add dompurify 和 npm add -D @types/dompu
dangerouslySetInnerHTML让react展示html数据
勿忘初心
05-16 2425
return(    &lt;div dangerouslySetInnerHTML = {{__html:'&lt;div&gt;大西几&lt;/div&gt;'}}&gt;&lt;/div&gt;)
dangerouslySetInnerHTML简单使用
qq_41396714的博客
05-20 1610
<div dangerouslySetInnerHTML = {{ __html: (props.msg).replace('<br/>', '<br />') }} /> 保留原有的标签样式换行 <br /> 原理： 1.dangerouslySetInnerHTMl 是React标签的一个属性； 2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对; 3.既可以插入DO.
react.js 使用 dangerouslySetInnerHTML 属性带来高亮
05-13
`dangerouslySetInnerHTML` 是 React 中一个有点危险的属性，它允许你将一个字符串作为 HTML 插入到 React 组件中。它的名称“危险地设置InnerHTML”（dangerouslySetInnerHTML）就是为了提醒你这个属性可能带来的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值