react.js使用非元素属性dangerouslySetInnerHTML

最新推荐文章于 2024-06-18 12:11:43 发布
最新推荐文章于 2024-06-18 12:11:43 发布
阅读量9.8k 收藏
点赞数 8
分类专栏： React javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshinegyan/article/details/53978538
版权

 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改正





nieshuangyan
关注
专栏目录
react中dangerouslySetInnerHTML的标签绑定事件
qq_35769971的博客
11-12 2432
react项目中dangerouslySetInnerHTML绑定事件 项目需求：采用富文本编辑器编辑的一段字符串格式的html需进行显示，使用dangerouslySetInnerHTML进行显示，但是这段HTML中包含img标签，希望将这个img标签不要直接显示，而是处理成a标签，点击时再进行图片显示，点击浏览器任意位置，图片不显示。 代码 import React, {useState} from "react"; // reactstrap components import {Modal} fro
Html5web全栈前端开发_react.js框架（一）
Icketang_的博客
07-24 377
一、浏览器原理 二、React 2.1 React简介 React是由Facebook团队推广的一个框架，以其出色的性能深受开发者喜爱 2.1.1 React有三大特点 虚拟DOM 组件开发 多端适配 2.1.2 Github https://github.com/facebook/react 2.1.3获取React 获取react.js文件 bower install react 获取re...
Only set one of `children` or `props.dangerouslySetInnerHTML的解决
MOAN.小M.的博客
09-16 753
Only set one of `children` or `props.dangerouslySetInnerHTML的解决
react中dangerouslySetInnerHTML使用
业余前端的职业经历
03-12 929
使用过vue的同学可能,知道如果后台回来富文本数据话 我们需要展示到网页上 我们可以使用 v-html 就可以帮他解析到网页上去 但学了react之后 我们可能有疑问了 react我们怎么整啊 还是和往常一样 废话不多说了 直接上代码 divContent(){ // 用这个模拟从后台回来的数据 return ( `<h1>Hello React.js</h1...
【已解决】Can only set one of `children` or `props.dangerouslySetInnerHTML`
程序边界
06-14 769
报错： 二、解决 使用dangerouslySetInnerHTML属性的虚拟dom元素下级应该没有任何内容，注释也不行！！！over
react解析html的dangerouslySetInnerHTML
ygunoil的博客
03-06 53
不合时宜的使用innerHTML可能会导致cross-site scripting (XSS)攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。 我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML这个 prop 的命名是故意这么设计的，以此来...
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用于比较虚拟...
Minified React error #60
最新发布
sakura的博客
06-18 339
Minified React error #60
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 9万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：&lt;div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /&gt;如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：&lt;div dang...
antd + react model自定义footer_React 基础关于组件属性（props）与状态（state）的入门介绍...
weixin_39639381的博客
10-21 531
大家好，在上一篇文章里，我们一起学习了如何创建第一个 React 组件，我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件，但是还有更多关于组件的内容值得我们去深入学习。本篇文章，我将和大家一起复习下如何使用组件的属性(props)与状态(state)。如何使用组件的属性(props)和其它应用程序一样，组件应具备重用性。接下来我们将基于上一节的例子，分别创建以下组件：...
html strong标签 无法渲染,javascript – 反应使用dangerouslySetInnerHTML来渲染带有html标签的json...
weixin_34282558的博客
06-28 420
我试图在列表中的字符串中呈现带有html标记的json列表,如下所示jsbin.它在Jsbin中工作.但在我的控制台中,我收到了以下警告：warning Only set one of `children` or `props.dangerouslySetInnerHTML` react/no-danger-with-children只是想知道是否有其他方法使用dangerouslySetInn...
初识React(5)：dangerouslySetInnerHTML属性
菜鸟搬砖记
08-29 1326
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 7441
dangerouslySetInnerHTML
react初涉到的坑(长期记录)
今天也要加油呀
06-18 2556
1.创建组件渲染中用的JSX语法一定别忘记闭合标签（在body html处不需要闭合标签，平时也习惯了）！！！最好编辑器装个JSX语法插件。例子：“ embedded: Expected corresponding JSX closing tag for …” 2.在标签里的for不能在正常使用了，而是要写成htmlFor。 ...
react.js 使用 dangerouslySetInnerHTML 属性带来高亮
05-13
`dangerouslySetInnerHTML` 是 React 中一个有点危险的属性，它允许你将一个字符串作为 HTML 插入到 React 组件中。它的名称“危险地设置InnerHTML”（dangerouslySetInnerHTML）就是为了提醒你这个属性可能带来的潜在风险。 使用 `dangerouslySetInnerHTML` 属性可以在 React 组件中插入一段 HTML 代码，这段代码会被 React 直接渲染出来。如果你想在这段 HTML 代码中高亮某些关键字，可以使用一些第三方库比如 `highlight.js` 来实现。 例如，你可以在 React 组件中定义一个 `div`，并将 `dangerouslySetInnerHTML` 属性设置为包含高亮代码的 HTML 字符串： ```jsx import React from 'react'; import hljs from 'highlight.js'; const HighlightedCode = ({ code }) => { const highlightedCode = hljs.highlightAuto(code).value; return ( <div dangerouslySetInnerHTML={{ __html: highlightedCode }} /> ); }; export default HighlightedCode; ``` 在这个例子中，我们使用了 `highlight.js` 库来高亮代码。`highlightAuto` 方法可以自动检测代码的语言类型并进行高亮处理。最后，我们将高亮处理后的代码通过 `dangerouslySetInnerHTML` 属性插入到了 React 组件中。 需要注意的是，使用 `dangerouslySetInnerHTML` 属性时需要格外小心，避免 XSS 攻击等安全问题。如果你不确定是否应该使用这个属性，可以考虑使用其他更安全的方法来实现同样的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值