美文网首页我爱编程
React爬坑之路(二)

React爬坑之路(二)

作者: 燃烧的土豆 | 来源:发表于2018-07-21 17:42 被阅读0次

    完美解决从后台传过来的html字符串<img/>标签显示不出来

    1.从后台富文本编辑器传过来的字符串赋值给value

    value=<p>style="text-align: center;">

    <img 

    title="1532159905.jpg" alt="2.jpg" 

    src="/ueditor/php/upload/image/20180721/1.jpg"/>

    </p>

    2.对<img/>标签src属性进行处理

    通常从后台传过来的src要想在前台正常显示需要在路径之前拼接上后台链接地址,如:http://192.168.2.219:8000,所以为了正常显示作如下处理

    var APIHost="http://192.168.2.219:8000"

    let html=value.replace(/\/ueditor/g,APIHost+'ueditor' )(全局替换)

    注(上面的ueditor来自后台传过来的路径

    注(确保value不为空,不然会报错无法使用replace

    3.渲染html字符串

    <div dangerouslySetInnerHTML={{__html:html}}><div>

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

    4.ok了,这样后台传过来的html字符串就可以正常渲染成html标签

    相关文章

      网友评论

        本文标题:React爬坑之路(二)

        本文链接:https://www.haomeiwen.com/subject/gdnhmftx.html