• react中使用字符串中生成HTML


    在react项目中,有的时候字符串中有HTML标签,如果直接输出字符串的话,那HTML标签就会被当成一个字符串。这显然不是我们想要的效果,所以我们需要用到 

    dangerouslySetInnerHTML 这个属性来将dom字符串渲染出来。

    dangerouslySetInnerHTML

    dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于跨站脚本(XSS)的攻击。因此,你可以直接在 React 中设置 HTML,但当你想设置 dangerouslySetInnerHTML 时,需要向其传递包含 key 为 __html 的对象,以此来警示你。例如:

    1 function createMarkup() {
    2   return {__html: 'First · Second'};
    3 }
    4 
    5 function MyComponent() {
    6   return <div dangerouslySetInnerHTML={createMarkup()} />;
    7 }

    使用例子:

     1 // js
     2 
     3  const Str = '需要鼠标<br/>需要特别检查摄像头<br/>需要电脑包<br/>测试机转租赁,序列号:XKS2014'
     4 
     5 
     6  // 输出
     7 
     8 <span dangerouslySetInnerHTML={{__html: Str}}></span>
     9 
    10 
    11 //结果
    12 
    13 // 需要鼠标
    14 // 需要特别检查摄像头
    15 // 需要电脑包
    16 // 测试机转租赁,序列号:XKS2014

     

  • 相关阅读:
    004.Jquery库的用法
    update 死锁问题
    Nginx负载均衡模式
    微信公众号开启服务器配置 JAVA
    mybatis plus + AOP 多数据源自动切换
    mybatis plus 快速上手
    mybits 笔记
    java 异步
    node 垃圾回收机制
    常用正则
  • 原文地址:https://www.cnblogs.com/hzn1995/p/14688348.html
Copyright © 2020-2023  润新知