React.js 小书 Lesson23 - dangerouslySetHTML 和 style

curried 发布于2019-08-21 17:34 / 3434人阅读

摘要：那是因为设置可能会导致跨站脚本攻击，所以团队认为把事情搞复杂可以防止警示大家滥用这个属性。下一节中我们将介绍小书和组件参数验证。

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

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson23

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

{% raw %}
这一节我们来补充两个之前没有提到的属性，但是在 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 的转义特性，页面上会显示：

表达式插入并不会把一个

渲染到页面，而是把它的文本形式渲染了。那要怎么才能做到设置动态 HTML 结构的效果呢？React.js 提供了一个属性 dangerouslySetInnerHTML，可以让我们设置动态设置元素的 innerHTML：

...
  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"}) 就可以修改元素的颜色成蓝色。
{% endraw %}

下一节中我们将介绍《React.js 小书 Lesson24 - PropTypes 和组件参数验证》。

GPU云服务器云服务器 React.js react.js cdn dangerouslySetHTML 小书

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89680.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson22 - props.children 和容器类组件

摘要：由于会把插入表达式里面数组中的一个个罗列下来显示。这样通过这个布局组件，就可以在各个地方高度复用我们的布局。嵌套的结构在组件内部都可以通过获取到，这种组件编写方式在编写容器类型的组件当中非常有用。下一节中我们将介绍小书和属性。 React.js 小书 Lesson22 - props.children 和容器类组件本文作者：胡子大哈本文原文：http://huziketang.co...

番茄西红柿 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson7 - 组件的 render 方法

摘要：一个组件类必须要实现一个方法，这个方法必须要返回一个元素。你也可以把它改成，它就会显示小书。注意，直接使用在的元素上添加类名如这种方式是不合法的。现在页面上是显示小书。下一节中我们将介绍小书组件的组合嵌套和组件树。 React.js 小书 Lesson7 - 组件的 render 方法本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

Near_Li 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

摘要：小书最后页面会显示内容组件可以和组件组合在一起，组件内部可以使用别的组件。当页面结构复杂起来，有许多不同的组件嵌套组合的话，组件树会相当的复杂和庞大。下一节中我们将介绍小书事件监听。 React.js 小书 Lesson8 - 组件的组合、嵌套和组件树本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 转载请注明出处，保留...

AbnerMing 2019-08-21 17:33 评论0 收藏0