为什么react元素有一个$$type属性?
创始人
2024-03-26 12:34:10
0

可能以为在编写的是JSX:

hi

但是实际上,你调用的是一个函数。

React.createElement(/* type */ 'marquee',/* props */ { bgcolor: '#ffa7c4' },/* children */ 'hi'
)

这个函数返回一个Object对象,叫这个对象为React元素。它告诉React接下来要渲染什么。

编写的组件将组成一个组件树。

{type: 'marquee',props: {bgcolor: '#ffa7c4',children: 'hi',},key: null,ref: null,typeof: Symbol.for('react.element'),
}

如果你经常使用React,你可能会对type、props、key、ref属性很熟悉,但是,什么是typeof属性?为什么他的属性是一个Symbol值?

从设计上来说,React 元素是一个普通的对象。

{type: 'marquee',props: {bgcolor: '#ffa7c4',children: 'hi',},key: null,ref: null,$ $typeof: Symbol.for('react.element'),
}

React有一些有效的例子来支持像我刚刚在上面做的那样编写的普通元素对象。

对于优化编译器,在worker之间传递UI元素或者将JSX与React包解耦是有用的。

但是,如果服务器侧有一个允许用户存储任意JSON对象的漏洞,而客户端代码期待一个字符串,这可能会成为一个问题:

// Server could have a hole that lets user store JSON
let expectedTextButGotJSON = {type: 'div',props: {dangerouslySe: {__html: '/* put your exploit here */'},},// ...};let message = { text: expectedTextButGotJSON };// Dangerous in React 0.13

{message.text}

在这种情况下,React 0.13很容易受到XSS攻击。这种攻击取决于现有的服务器漏洞。 

在React 0.14版本,它的修复方法是对每一个React元素使用Symbol来进行标记。

不能把Symbol放在JSON中,因此,即使服务器具有安全漏洞并返回JSON而不是文本,该JSON也不能包含Symbol.for('react.element')。 React将检查元素的$typeof属性,如果$typeof属性丢失或无效,将拒绝处理该元素

相关内容

热门资讯

山西省医保局完善省直管单位职工... 12月24日,记者从省医保局获悉,我省将进一步完善省直管单位职工基本医疗保险门诊慢特病(以下简称“省...
宿迁成功举办“思辩明法 笃行致... 12月21日,宿迁市“思辩明法 笃行致远”律师辩论赛决赛在运河金陵大酒店隆重举行,12支代表队经过紧...
将引入私人投资,加州撤回起诉美... 央视记者当地时间12月27日获悉,美国加利福尼亚州已正式撤回此前针对美联邦政府的诉讼,不再挑战联邦政...
增强市场主体获得感 以制度和规... “放得活”与“管得好”,既是一项重要的经济政策要求,也是一种治理智慧。在经济转型升级的关键阶段,把握...
东营集中巡查!抓获违法犯罪人员... 根据上级统一部署 连日来 东营市公安局东营分局 结合岁末年初社会治安特点 对全区治安复杂区域、人员密...
每周股票复盘:金煤科技(600... 截至2025年12月26日收盘,金煤科技(600844)报收于2.94元,较上周的3.0元下跌2.0...
每周股票复盘:武进不锈(603... 截至2025年12月26日收盘,武进不锈(603878)报收于9.94元,较上周的10.14元下跌1...
每周股票复盘:华依科技(688... 截至2025年12月26日收盘,华依科技(688071)报收于33.81元,较上周的32.34元上涨...
每周股票复盘:文灿股份(603... 截至2025年12月26日收盘,文灿股份(603348)报收于19.23元,较上周的19.5元下跌1...
每周股票复盘:中邮科技(688... 截至2025年12月26日收盘,中邮科技(688648)报收于58.51元,较上周的58.49元上涨...