当后台接口返回存在html标签的字符串，react如何处理

最新推荐文章于 2023-05-31 15:31:38 发布

程序员雪儿

最新推荐文章于 2023-05-31 15:31:38 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签：字符串转义

本文链接：https://blog.youkuaiyun.com/weixin_40917733/article/details/83057758

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在React中如何安全地使用dangerouslySetInnerHTML属性来插入带有HTML标签的字符串，强调了正确用法及避免错误实践的重要性。

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

例如：


render{
    return(
        <div>
            <div>接下来是例子</div>
            <div dangerouslySetInnerHTML={{__html:"<span>这是一个带有html标签的字符串           </span>"}}/>
        </div>    
    )
}

上面的方法可以实现，但是需要注意的是，这样的方法一定是使用dangerouslySetInnerHTML属性所在标签没有内容，例如<div dangerouslySetInnerHTML={{“<span>这是一个带有html标签的字符串</span>”}}>内容内容内容</div>，这样的写法是不被允许的。

博客迁移地址：https://www.cnblogs.com/cuteCoderSnow/