react标签属性dangerouslySetInnerHTML将字符串转化为html（动态渲染）

最新推荐文章于 2025-03-10 22:48:07 发布
最新推荐文章于 2025-03-10 22:48:07 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qdmoment/article/details/82926668
版权

根据需求，前端页面有时需要动态展示后端返回的代码，但是此时的代码是字符串类型，直接展示，页面显示的只是字符串，这时就用到了react标签属性dangerouslySetInnerHtml属性；

dangerouslySetInnerHtml用法：

dangerouslySetInnerHtml = {__html:'这里是后端返回字符串代码'}

注：1，dangerouslySetInnerHtml既可以插入DOM，又可以插入字符串

       2，不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错 

            误，不合适的净化也是导致网页攻击 的原因之一。

参考链接：

https://blog.youkuaiyun.com/exploringfly/article/details/80582859

http://wiki.jikexueyuan.com/project/react/dangerously.html

前端如何安全的渲染HTML字符串?
Z__7Gk的博客
08-18 4071
在现代的Web 应用中，动态生成和渲染 HTML 字符串是很常见的需求。然而，不正确地渲染HTML字符串可能会导致安全漏洞，例如跨站脚本攻击（XSS）。为了确保应用的安全性，我们需要采取一些措施来在安全的环境下渲染HTML字符串。本文将介绍一些安全渲染 HTML 字符串的最佳实践，以帮助你有效地避免潜在的安全风险。
dangerouslySetInnerHTMl
aechi62008的专栏
02-10 325
dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind； 听说这个单词这么长，是故意的，应为有可能不合时宜的使用innerHTML会导致XSS攻击(然而我并不懂什么是XSS)， __htlml: DOM; 通常dangerSetInnerHTML(这个糟糕的单词，，这么长。。)是和__html配套使用的，用来在一个标签中插入许多个...
React中的dangerouslySetInnerHTML
txl2498459886的博客
10-10 1万+
dangerouslySetInnerHTML，翻译过来就是：危险的设置内部HTML。要知道有这么一句话：“永远不要相信用户的输入”。用户有时候不会按照程序员所设想的规则来进行数据的输入，比如想要用户输入数字，用户却输入的是文本，类似的情况比比皆是。
React:类组件（中）
最新发布
Au_ust的博客
03-10 862
React写进{}内的东西，不允许被当作代码块解析，是为了防止xss攻击和代码注入是一种常见的安全漏洞，攻击者通过注入恶意脚本到网页中，从而在用户浏览器中执行恶意代码。XSS 攻击通常发生在 Web 应用程序中，尤其是当用户输入的内容未经过滤或转义就直接显示在页面上时。：恶意用户可以通过注入 HTML 或 JavaScript 代码，篡改页面内容或窃取用户数据不过如果你想忽略跨站脚本攻击也是可以的dangerouslySetInnerHTML 是React 中用于直接设置 HTML 内容的一个特殊属性。
react属性dangerouslySetInnerHTML
孜然卷的博客
12-06 487
item.content为后端返回html字段 在react中也提供了一个属性可以帮我们将dom字符串转化为dom节点,这个属性就是：dangerouslySetInnerHTML接收一个对象具体用法如下：若是动态数据直接替换__html的值即可。
props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react
YmwWow的博客
07-30 2920
错误信息： props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information 意思是dangerouslySetInnerHTML的格式写...
dangerouslySetInnerHTML
weixin_46600931的博客
06-18 2174
属性时需要格外小心，因为它可以导致跨站脚本攻击（XSS）和其他安全问题。请确保您信任要插入的HTML，并在可能的情况下使用更安全的方法来渲染内容。是React中的一个属性，它允许您将HTML作为字符串直接插入到组件中。的属性，该属性包含您要插入到组件中的HTML字符串。属性时，您必须传递一个对象，该对象具有一个名为。
如何把html字符串转成一个React组件？有哪些好用的第三方库
06-08
2. dangerouslySetInnerHTML：React本身提供了一个dangerouslySetInnerHTML属性，可以将HTML字符串直接渲染到组件中。不过需要注意，这种方式可能存在XSS攻击的风险。 3. html-to-react：这个库可以将HTML字符串...
实时渲染React DOM与HTML转义实践指南
- `dangerouslySetInnerHTML`是React的一个属性，用来在JSX中设置HTML字符串。然而，由于它绕过了React的默认安全检查，使用时需要非常小心，以避免XSS攻击。 从标签来看，"programming", "software-development", ...
ReactRenderHTML：安全渲染HTML到React元素的替代方案
使用react-render-html可以将HTML字符串转换为React元素，从而在React组件中安全地渲染HTML内容。这种方式比直接使用dangerouslySetInnerHTML更安全，因为它可以避免一些常见的XSS攻击问题。下面详细说明react-...
html 字符串里换行
03-29
在渲染 HTML 时，如果使用的是 React 或者 Vue 等框架，可以使用 `dangerouslySetInnerHTML` 属性来将字符串转换成 HTML： ``` <div dangerouslySetInnerHTML={{__html: htmlString}}></div> ```
react中dangerouslySetInnerHTML使用（简洁）
热门推荐
exploringfly的博客
06-05 10万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：&lt;div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /&gt;如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：&lt;div dang...
dangerouslySetInnerHTML简单使用
qq_41396714的博客
05-20 1781
<div dangerouslySetInnerHTML = {{ __html: (props.msg).replace('<br/>', '<br />') }} /> 保留原有的标签样式换行 <br /> 原理： 1.dangerouslySetInnerHTMl 是React标签的一个属性； 2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对; 3.既可以插入DO.
dangerouslySetInnerHTML，React中显示html代码
mengsandy的专栏
08-03 1259
当用户输入或者获取到的数据是一段HTML代码的时候，dangerouslySetInnerHTML就可以把这一段代码变成HTML，然后插入到某个地方。
dangerouslySetInnerHTML属性
chunchun1230的博客
10-27 738
dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容 import React from 'react'; class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>' } } render() { return ( <div&g
react dangerouslySetInnerHTML
weixin_46146313的博客
07-16 281
dangerouslySetInnerHTML 设置标签的innerHtml 注意：message不能接收页面的数据 太危险了，接收后端的数据使用 import React, { Component } from 'react'; let message = ` <h1>打败我们的不是天真，是天真热</h1> <p>太热了</p> ` class App extends Component { r
error: props.dangerouslySetInnerHTML must be in the from
风吹云灭
08-22 1472
在react开发的过程中有时我们需要展示一段富文本，react不能够直接解析富文本，需要他的一个属性dangerouslySetInnerHTML <div dangerouslySetInnerHTML = {{_html:"<div>这里放的是html字符串</div>"}} /> 在使用的过程中报错： 出现这个问题的原因是我们使用的格式不对。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值