dangerouslySetInnerHTMl

dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

听说这个单词这么长,是故意的,应为有可能不合时宜的使用innerHTML会导致XSS攻击(然而我并不懂什么是XSS),

__htlml: DOM;

通常dangerSetInnerHTML(这个糟糕的单词,,这么长。。)是和__html配套使用的,用来在一个标签中插入许多个标签(安全的插入);

通常写法:

var HelloMessge = React.createClass({
    render: <div
                dangerouslySetInnerHTML={{
                    __html: '<h3>hahhah</h3>'
                }}>
            </div>
})

当然既然可以插入DOM,也可以插入字符串。。

dangerouslySetInnerHTML={{
    __html: 'hahahhahaha'
    }}>

之所以是有2个{{}},是因为第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对

参考文献:
http://wiki.jikexueyuan.com/project/react/dangerously.html

http://www.cnblogs.com/shamgod/p/5052312.html

posted @   割肉机  阅读(2761)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示