出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 函数一样,任何的 HTML 格式都会被转义掉:
假设上面是一个富文本编辑器组件,富文本编辑器的内容是动态的 HTML 内容,用 this.state.content
来保存。我希望在编辑器内部显示这个动态 HTML 结构,但是因为 React.js 的转义特性,页面上会显示:
需要给 dangerouslySetInnerHTML
传入一个对象,这个对象的 __html
属性值就相当于元素的 innerHTML
,这样我们就可以动态渲染元素的 结构了。
有写朋友会觉得很奇怪,为什么要把一件这么简单的事情搞得这么复杂,名字又长,还要传入一个奇怪的对象。那是因为设置 innerHTML
可能会导致跨站脚本攻击(XSS),所以 React.js 团队认为把事情搞复杂可以防止(警示)大家滥用这个属性。这个属性不必要的情况就不要使用。
React.js 中的元素的 style
属性的用法和 DOM 里面的 style
不大一样,普通的 HTML 中的:
style
接受一个对象,这个对象里面是这个元素的 CSS 属性键值对,原来 CSS 属性中带 -
的元素都必须要去掉 -
换成驼峰命名,如 换成 fontSize
,text-align
换成 textAlign
。
用对象作为 style
方便我们动态设置元素的样式。我们可以用 props
或者 state
中的数据生成样式对象再传给元素,然后用 就可以修改样式,非常灵活:
只要简单地 setState({color: 'blue'})
就可以修改元素的颜色成蓝色。
因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 发帖,我会回答大家的疑问。