zoukankan      html  css  js  c++  java
  • react中如何渲染html代码

    开发中遇到一个问题,就是用户输入可多个空格后,在页面上只会显示为一个空格,想到的解决办法就是利用 去replace空格,让其可以正常渲染,如下:

    var result=value.replace(/s/g," ");

    经过替换后发现页面上并不能直接渲染 ,经过一番搜索发现react的 dangerouslySetInnerHTML ,可以解析并渲染html代码。

    用法如下:

    如果想让div元素中的内容: '<h3>hello world</h3>'正常渲染

    <div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>

    注意 dangerouslySetInnerHTML 中必须是一个对象,更直观的例子如下:

    function createMarkup() {
      return {__html: 'First &nbsp;&nbsp;&nbsp; Second'};
    }
    
    function MyComponent() {
      return <div dangerouslySetInnerHTML={createMarkup()}></div>;
    }

    相关资料及官方文档:

    点我跳转或者点我跳转

  • 相关阅读:
    GetArxPath
    动态链接库
    获取文件名称 消除前面的绝对地址路径
    arx 插入图片
    cstring to utf8
    map 用法
    异常处理
    面向对象 "一"
    configparser模块
    装饰器
  • 原文地址:https://www.cnblogs.com/li-you/p/7727845.html
Copyright © 2011-2022 走看看