React的dangerouslySetInnerHTML与Angular的ng-bind-html

这篇博客探讨了在React中如何使用dangerouslySetInnerHTML来解析HTML,以及与Angular中的ng-bind-html进行对比。文章指出,通过设置一个对象的__html属性可以解决React中富文本编辑器的HTML解析问题,同时也提供了不同的写法选择。

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

公司的技术栈是angularjs,所以对angular的解析html比较熟悉,就是众所周知的ng-bind-html

<div ng-bind-html="'<strong>csdn</strong>'"></div>

不过我的个人博客前端是用react搭建的,当时选用的是富文本编辑器编辑博客(虽然现在换成了markdown的格式),当时并没有解决react解析html的问题,现在才发现,这个问题其实并不难。

用一个dangerouslySetInnerHTML就可以了 ,

<div dangerouslySetInnerHTML={{__html: '<strong>csdn</strong>'}} />

如果想换写法也可以,

const obj = {
    __html: '<strong>csdn</strong>'
} 
<div dangerouslySetInnerHTML={obj} />

所以,实际上dangerouslySetInnerHTML接收一个对象,对象的__html
属性就是被解析的html代码。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值