本文共 1420 字，大约阅读时间需要 4 分钟。

Lesson 23 dangerouslySetHTML 和 style 属性

这一节我们来补充两个之前没有提到的属性，但是在 React.js 组件开发中也非常常用，但是它们也很简单。

dangerouslySetHTML

出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一样，任何的 HTML 格式都会被转义掉：

class Editor extends Component {
     constructor() {
       super()    this.state = {
         content: '
React.js 小书
'    }  }  render () {
       return (      
   
            {
   this.state.content}      
   
    )  }}

假设上面是一个富文本编辑器组件，富文本编辑器的内容是动态的 HTML 内容，用 this.state.content 来保存。我希望在编辑器内部显示这个动态 HTML 结构，但是因为 React.js 的转义特性，页面上会显示：

...  render () {
       return (      
   
    )  }...

需要给 dangerouslySetInnerHTML 传入一个对象，这个对象的 __html 属性值就相当于元素的 innerHTML，这样我们就可以动态渲染元素的 innerHTML 结构了。

有写朋友会觉得很奇怪，为什么要把一件这么简单的事情搞得这么复杂，名字又长，还要传入一个奇怪的对象。那是因为设置 innerHTML 可能会导致跨站脚本攻击（XSS），所以 React.js 团队认为把事情搞复杂可以防止（警示）大家滥用这个属性。这个属性不必要的情况就不要使用。

style

React.js 中的元素的 style 属性的用法和 DOM 里面的 style 不大一样，普通的 HTML 中的：

React.js 小书

在 React.js 中你需要把 CSS 属性变成一个对象再传给元素：

React.js 小书

style 接受一个对象，这个对象里面是这个元素的 CSS 属性键值对，原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名，如 font-size 换成 fontSize，text-align 换成 textAlign。

用对象作为 style 方便我们动态设置元素的样式。我们可以用 props 或者 state 中的数据生成样式对象再传给元素，然后用 setState 就可以修改样式，非常灵活：

React.js 小书

只要简单地 setState({color: 'blue'}) 就可以修改元素的颜色成蓝色。

当前内容版权归 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请点击 .

最初的起点:

上一篇:

下一篇:

转载地址：https://blog.csdn.net/Mr_zzr/article/details/125786270 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！