获得徽章 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
}展开赞过
评论1
juejin.cn