Only set one of `children` or `props.dangerouslySetInnerHTML的解决

于 2022-09-16 11:39:06 发布
阅读量707 收藏
点赞数
分类专栏： 问题目录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOAN_/article/details/126887429
版权

React innerHTML 空格 类型转换 字符串
关键词由CSDN通过智能技术生成

在这里插入图片描述

在使用react的innerHtml时，如果碰到这个问题，是因为在这个元素下不能有任何东西，注释，空格都不行，所以直接把那个div中的空格删掉就行

这串代码的

dangerouslySetInnerHTML={{ __html: subItem.content as string }}

中的
_html的值为string 所以我加上了as string ts中断言为string就行
问题解决方案来源：解决方案来源

MOAN.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单理解vue中Props属性
09-01
在Vue.js中，Props是用于父子组件间通信的一种机制。通过Props，父组件能够将数据传递给子组件，使得子组件可以在其独立的作用域内访问这些数据。这种数据传递方式是单向的，即从父组件到子组件，确保数据流的可控性...
PCLDebug.propsPCLRelease.props.rar
01-08
标题中的"PCLDebug.propsPCLRelease.props.rar"指的是一个压缩包文件，包含了PCL（Point Cloud Library）项目在调试和发布模式下所需的配置文件。PCL是一个开源的C++库，专注于处理三维点云数据，广泛应用于机器人、...
【已解决】Can only set one of `children` or `props.dangerouslySetInnerHTML`
程序边界
06-14 731
报错： 二、解决 使用dangerouslySetInnerHTML属性的虚拟dom元素下级应该没有任何内容，注释也不行！！！over
react.js使用非元素属性dangerouslySetInnerHTML
sunshinegyan的专栏
01-02 9808
Uncaught Error: Can only set one of `children` or `props.dangerouslySetInnerHTML` 1.浏览器报错内容：Can only set one of `children` or `props.dangerouslySetInnerHTML‘ 2.解决方法 2.1使用dangerously
html strong标签 无法渲染,javascript – 反应使用dangerouslySetInnerHTML来渲染带有html标签的json...
weixin_34282558的博客
06-28 390
我试图在列表中的字符串中呈现带有html标记的json列表,如下所示jsbin.它在Jsbin中工作.但在我的控制台中,我收到了以下警告：warning Only set one of `children` or `props.dangerouslySetInnerHTML` react/no-danger-with-children只是想知道是否有其他方法使用dangerouslySetInn...
react中dangerouslySetInnerHTML使用（简洁）
热门推荐
exploringfly的博客
06-05 9万+
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下：<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：<div dang...
React中组件的props.children
01-20
在React中，`props.children` 是一个特殊属性，它允许父组件向子组件传递内容。这一特性使得组件之间能够灵活地交互，实现可复用的、动态的数据展示。以下是对`props.children`深入理解的详细解释： ### 1. 父组件...
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了...
前端大厂最新面试题-state_props.docx
06-06
return <h1>Hello {this.props.name}; } } const element = <Welcome name="Sara" onNameChanged={this.handleName} />; ``` 在上面的示例中，我们使用 Props 来传递名称和回调函数给子组件。 三、State 和 ...
设置原始的HTML：dangerouslySetInnerHTML
uwenhao2008的博客
03-13 2901
 一般我们批量插入一些文章之类的都是直接插入HTML页面的，所以就考虑用到这个属性了var Hello = React.createClass({ render:function(){ var htmlSet = {__html: 'First &amp;middot; Second'}; return ( ...
React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示在table的扩展中
bellus
07-10 1万+
function showhtml(record){ var html = {__html:record.description}; return <div dangerouslySetInnerHTML={html}></div> ; }
React渲染动态HTML——dangerouslySetInnerHTML
小狼驿站
06-01 7424
dangerouslySetInnerHTML
DangerouslySetInnerHTML属性
weixin_30823001的博客
05-10 540
不合时宜的使用innerHTML可能会导致cross-site scripting (XSS)攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。 我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。dangerouslySetInnerHTML这个 prop 的命名是故意这么设计的，以此来...
dangerouslySetInnerHTML属性的用法
qq_40615442的博客
12-04 1994
<li key={index} onClick={this.handleItemDelete.bind(this, index)} dangerouslySetInnerHTML={{__html:item}} ></li> 使用dangerouslySetInnerHTML属性，当item内有html标签时，将不会被转义。 有2个{{}}，第一{...
react dangerouslySetInnerHTML
ISaiSai的专栏
12-29 1848
如果服务端在接口上已经对html进行了转义，并且可以完全信任服务端的接口数据，可以使用dangerouslySetInnerHTMLvar test = "“test”<div>hehe</div>"; <div dangerouslySetInnerHTML={{__html:test}}></div>
React 学习笔记：dangerouslySetInnerHTML属性（七）
boonyaxnn的博客
06-28 725
回顾js中的innerHTML标签和innerText标签： 1、innerHTML：识别标签结构： 获取元素的内容：element.innerHTML; 给元素设置内容：element.innerHTML =htmlString; 2、innerText：只识别文本： 获取元素的内容：element.innerText; 给元素设置内容：ele...
React用dangerouslySetInnerHTML动态渲染HTML
weixin_33826268的博客
09-25 635
React用dangerouslySetInnerHTML动态渲染HTML React项目，需要把后台返回的一段html代码在页面上显示 在render获取内容， //在render里获取内容 const html = {__html:content} <div className="html-wrap" dangerouslySetInnerHTML={html}...
props.children
最新发布
07-27
props.children 是 React 中一个特殊的 prop，它允许我们在组件中嵌套其他组件或者元素。当我们在使用一个组件时，可以在其标签内部添加其他组件、元素或者文本作为 props.children 的值。这样就可以在组件内部使用这些嵌套的内容。 例如，假设我们有一个名为 "Card" 的组件，它用于渲染一个带有标题和内容的卡片。我们可以通过 props.children 将标题和内容传递给 Card 组件。 ```jsx function Card(props) { return ( <div className="card"> <h2>{props.title}</h2> <div className="content">{props.children}</div> </div> ); } function App() { return ( <div className="App"> <Card title="Example Card"> <p>This is the content of the card.</p> </Card> </div> ); } ``` 在上面的例子中，`<p>` 标签中的内容将作为 props.children 传递给 Card 组件，并在组件内部渲染为 `<div className="content">...</div>` 的子元素。 通过使用 props.children，我们可以创建更灵活和可复用的组件，使其能够容纳不同类型和数量的子元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值