react.js使用非元素属性dangerouslySetInnerHTML

最新推荐文章于 2025-06-12 10:45:54 发布
最新推荐文章于 2025-06-12 10:45:54 发布
阅读量9.9k 收藏
点赞数 8
CC 4.0 BY-SA版权
分类专栏： React javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunshinegyan/article/details/53978538
本文介绍了在使用React时遇到的'Can only set one of `children` or `props.dangerouslySetInnerHTML`'错误，并提供了两种解决方法：一是确保使用了`dangerouslySetInnerHTML`时元素间没有其他内容；二是正确地设置`dangerouslySetInnerHTML`。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 Uncaught Error: Can only set one of `children` or `props.dangerouslySetInnerHTML`

1.浏览器报错内容：Can only set one of `children` or `props.dangerouslySetInnerHTML‘




2.解决方法


2.1使用dangerouslySetInnerHTML属性的虚拟dom元素之间可能有内容，应该没有任何内容



2.2改正





Only set one of `children` or `props.dangerouslySetInnerHTML的解决
MOAN.小M.的博客
07-18 698
标题虽然只是一个报错的信息的解决，但还是想通过这一个问题，给大家分享一下我在碰到类似问题时的解决思路 特别是在写react+typescript项目的时候，会频繁的出现很多红线和报错，导致代码都没办法
react中dangerouslySetInnerHTML的标签绑定事件
qq_35769971的博客
11-12 2628
react项目中dangerouslySetInnerHTML绑定事件 项目需求：采用富文本编辑器编辑的一段字符串格式的html需进行显示，使用dangerouslySetInnerHTML进行显示，但是这段HTML中包含img标签，希望将这个img标签不要直接显示，而是处理成a标签，点击时再进行图片显示，点击浏览器任意位置，图片不显示。 代码 import React, {useState} from "react"; // reactstrap components import {Modal} fro
dangerouslySetInnerHTML使用方法
最新发布
weixin_47002803的博客
06-12 251
‌是 React 中的一个特殊属性，用于将HTML字符串直接插入到DOM中。这个属性通常用于渲染从外部获取的HTML内容，如 CMS系统 中的内容。使用dangerouslySetInnerHTML时需要注意其潜在的安全风险，因为它可能会导致 跨站脚本攻击 （XSS）‌12。dangerouslySetInnerHTML接受一个对象，该对象包含一个__html属性，其值为要插入的HTML字符串。
react中dangerouslySetInnerHTML使用
业余前端的职业经历
03-12 981
使用过vue的同学可能,知道如果后台回来富文本数据话 我们需要展示到网页上 我们可以使用 v-html 就可以帮他解析到网页上去 但学了react之后 我们可能有疑问了 react我们怎么整啊 还是和往常一样 废话不多说了 直接上代码 divContent(){ // 用这个模拟从后台回来的数据 return ( `<h1>Hello React.js</h1...
【已解决】Can only set one of `children` or `props.dangerouslySetInnerHTML`
程序边界
06-14 907
报错： 二、解决 使用dangerouslySetInnerHTML属性的虚拟dom元素下级应该没有任何内容，注释也不行！！！over
Minified React error #60
sakura的博客
06-18 453
Minified React error #60
React.js入门学习第一篇
10-22
React.js是Facebook开发的一款用于构建用户界面的JavaScript库。由于其声明式的编程范式、组件化的架构、高效的虚拟DOM以及服务器端渲染等特性，React已成为前端开发中非常流行的框架。本篇文章将从React.js的基础...
前端大厂最新面试题-react.docx
06-06
可以使用dangerouslySetInnerHTML属性来使用innerHTML。 15. 在JSX中如何进行循环？可以使用map()函数或forEach()函数来进行循环。 四、React diff算法 16. 什么是React的diff算法？diff算法是React用于比较虚拟...
使用 Draft.js 和 react-draft-wysiwyg 在 React 中构建富文本编辑器
分享身边生活经验blog
09-14 1405
Draft.js 是 React 的富文本编辑器框架，如何修复Windows上的硬盘I/O设备错误为开发人员提供 API 来构建自己的富文本编辑器实现。它提供了一个预先开发的 React 组件，用于生成和呈现富文本。Draft.js 通过提供声明性 API，支持从简单文本格式到嵌入超链接、图像、提及等媒体项等功能，让开发人员能够为各种用例构建富文本编辑器。Draft.js 不提供预构建的工具栏元素。
react解析html的dangerouslySetInnerHTML
ygunoil的博客
03-06 95
不合时宜的使用innerHTML可能会导致cross-site scripting (XSS)攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。 我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML这个 prop 的命名是故意这么设计的，以此来...
dangerously-set-html-content:渲染原始html风险自负！
05-17
:warning: :warning: :warning: 危险地设置html内容 :warning: :warning: :warning: 渲染原始html需要您自担风险！ 语境 这是一篇博客文章，更详细地说明了这一点： TL; DR React使用dangerouslySetInnerHtml道具来呈现原始html，并且在几乎所有情况下都可以很好地工作，但是如果您的html内有一些scripts标签怎么办？ 当您使用dangerouslySetInnerHtml在组件上，内部React使用innerHtml节点的属性设置的内容，这为不执行任何JavaScript。 这种行为对我来说似乎很奇怪（我的意思是道具名称包含dangerously的词，并且您还需要传递带有__html的对象，这是__html ，因此您确实知道自己在做什么），尽管现在已经完全理解了，仍然不能解决我的问题 经过一番搜索后，我发现document有一个名为东西，该API可让您创建文档
react中dangerouslySetInnerHTML使用（简洁）
热门推荐
exploringfly的博客
06-05 10万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：&lt;div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /&gt;如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：&lt;div dang...
html strong标签 无法渲染,javascript – 反应使用dangerouslySetInnerHTML来渲染带有html标签的json...
weixin_34282558的博客
06-28 482
我试图在列表中的字符串中呈现带有html标记的json列表,如下所示jsbin.它在Jsbin中工作.但在我的控制台中,我收到了以下警告：warning Only set one of `children` or `props.dangerouslySetInnerHTML` react/no-danger-with-children只是想知道是否有其他方法使用dangerouslySetInn...
antd + react model自定义footer_React 基础关于组件属性（props）与状态（state）的入门介绍...
weixin_39639381的博客
10-21 606
大家好，在上一篇文章里，我们一起学习了如何创建第一个 React 组件，我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件，但是还有更多关于组件的内容值得我们去深入学习。本篇文章，我将和大家一起复习下如何使用组件的属性(props)与状态(state)。如何使用组件的属性(props)和其它应用程序一样，组件应具备重用性。接下来我们将基于上一节的例子，分别创建以下组件：...
初识React(5)：dangerouslySetInnerHTML属性
菜鸟搬砖记
08-29 1368
dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容 import React from 'react'; class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'&lt;h1&gt;标题名称&lt;/h1&gt...
React渲染动态HTML——dangerouslySetInnerHTML
小狼驿站
06-01 7536
dangerouslySetInnerHTML
React中使用dangerouslySetInnerHtml渲染HTML的风险分析
在现代Web开发中，React是一个广泛使用的JavaScript库，用于构建用户界面。它由Facebook和社区开发，并且拥有一套强大的规则和模式，使得构建交互式界面变得容易和高效。然而，React同时也提供了处理潜在危险操作的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值