zoukankan      html  css  js  c++  java
  • react中dangerouslySetInnerHTML使用

    在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。

    在显示时,将内容写入__html对象中即可。具体如下:

    <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />


    如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:

    <div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />


    原理:

    1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

    2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

    3.既可以插入DOM,又可以插入字符串;

    4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。
    ————————————————
    版权声明:本文为CSDN博主「exploringfly」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/exploringfly/java/article/details/80582859

  • 相关阅读:
    PythonStudy——os 操作系统 模块
    PythonStudy——sys:系统 模块
    PythonStudy——datatime 模块
    PythonStudy——calendar 模块
    PythonStudy——time 模块
    PythonStudy——shelve 模块
    PythonStudy——hashlib 模块
    PythonStudy——hmac 模块
    JDK的版本历史
    Zookeeper分布式协调服务
  • 原文地址:https://www.cnblogs.com/cangqinglang/p/12854691.html
Copyright © 2011-2022 走看看