React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性

• 做者：胡子大哈
• 原文连接： http://huziketang.com/books/react/lesson23
• 转载请注明出处，保留原文连接和做者信息。

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

dangerouslySetHTML

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

class Editor extends Component { constructor() { super() this.state = { content: '<h1>React.js 小书</h1>' } } render () { return ( <div className='editor-wrapper'> {this.state.content} </div> ) } } 

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

表达式插入并不会把一个 <h1> 渲染到页面，而是把它的文本形式渲染了。那要怎么才能作到设置动态 HTML 结构的效果呢？React.js 提供了一个属性 dangerouslySetInnerHTML，可让咱们设置动态设置元素的 innerHTML：

...
  render () {
    return ( <div className='editor-wrapper' dangerouslySetInnerHTML={{__html: this.state.content}} /> ) } ... 

须要给 dangerouslySetInnerHTML 传入一个对象，这个对象的 __html 属性值就至关于元素的 innerHTML，这样咱们就能够动态渲染元素的 innerHTML 结构了。

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

style

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

<h1 style='font-size: 12px; color: red;'>React.js 小书</h1> 

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

<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1> 

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

用对象做为 style 方便咱们动态设置元素的样式。咱们能够用 props 或者 state 中的数据生成样式对象再传给元素，而后用 setState 就能够修改样式，很是灵活：

<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小书</h1> 

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

课后练习

*覆盖默认样式

---

由于第三方评论工具备问题，对本章节有任何疑问的朋友能够移步到 React.js 小书的论坛 发帖，我会回答你们的疑问。