获得徽章 8
Taro React框架在微信端无法用dangerouslySetInnerHTML渲染span标签. 是因为微信在skylin模式也支持了Span标签. 导致Taro在解析html标签时, 把span当成了小程序原生标签, 导致无法渲染出来.
taro源码请看图1, 2, 3
解决方法如下:
import Taro from '@tarojs/taro'
import { TaroElement } from '@tarojs/runtime'
// @ts-ignore
Taro.options.html.transformElement = (taroEle: TaroElement) => {
// @ts-ignore
const h5tagName = taroEle?.h5tagName?.toLowerCase()
if (h5tagName === 'span') {
taroEle.tagName = 'TEXT'
taroEle.nodeName = 'text'
}
if (h5tagName === 'font') {
taroEle.tagName = 'TEXT'
taroEle.nodeName = 'text'
let _style = taroEle.getAttribute('style')
const { color, size, face } = taroEle.props
if (color) {
_style = `color: ${color}; ${_style}`
}
if (size) {
_style = `font-size: ${size}; ${_style}`
}
if (face) {
_style = `font-family: ${face}; ${_style}`
}
taroEle.setAttribute('style', _style)
}
return taroEle
}
taro源码请看图1, 2, 3
解决方法如下:
import Taro from '@tarojs/taro'
import { TaroElement } from '@tarojs/runtime'
// @ts-ignore
Taro.options.html.transformElement = (taroEle: TaroElement) => {
// @ts-ignore
const h5tagName = taroEle?.h5tagName?.toLowerCase()
if (h5tagName === 'span') {
taroEle.tagName = 'TEXT'
taroEle.nodeName = 'text'
}
if (h5tagName === 'font') {
taroEle.tagName = 'TEXT'
taroEle.nodeName = 'text'
let _style = taroEle.getAttribute('style')
const { color, size, face } = taroEle.props
if (color) {
_style = `color: ${color}; ${_style}`
}
if (size) {
_style = `font-size: ${size}; ${_style}`
}
if (face) {
_style = `font-family: ${face}; ${_style}`
}
taroEle.setAttribute('style', _style)
}
return taroEle
}
展开
评论
1
赞了这篇沸点
😬对方：你看看你说的都是些什么话？
乱回：安徒生童话。
😬对方：追你的人多吗？乱回：差不多吧。
😬对方：宝宝你身上好香啊！乱回：因为我是乡巴佬
😬对方：不要怕有我在。乱回：你在我更害怕。
😬已读：你谈过几个男朋友？乱回：哪有什么男朋友，都是亲过嘴的好哥们。
😬对方：我可以追你吗？乱回：恭喜你进入海选名单。
😬已读：你真瘦，身材真好。乱回：因为我从来不吃男人画的饼。
😬已读：你有几个前男友？乱回：没有前男友，都是亲过嘴的好哥们。
乱回：安徒生童话。😬对方：追你的人多吗？
乱回：差不多吧。😬对方：宝宝你身上好香啊！
乱回：因为我是乡巴佬😬对方：不要怕有我在。
乱回：你在我更害怕。😬已读：你谈过几个男朋友？
乱回：哪有什么男朋友，都是亲过嘴的好哥们。😬对方：我可以追你吗？
乱回：恭喜你进入海选名单。😬已读：你真瘦，身材真好。
乱回：因为我从来不吃男人画的饼。😬已读：你有几个前男友？
乱回：没有前男友，都是亲过嘴的好哥们。
展开
2
7
赞了这篇沸点
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
不过该说不说游戏是真好玩啊
赞了这篇文章
![[震惊]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_57.6b8baad.png)
![[大哭]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_60.9016267.png)
![[坏笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_41.2751fc1.png)
![[白眼的狗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_98.9f6d4ad.png)
![[无辜呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_96.4fb9d71.png)
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
赞了这篇沸点
![[吃瓜群众]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_10.42a731c.png)
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
![[18禁]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_126.21e6944.png)