react提供的dangerouslySetInnerHTML即可
这个属性相比于其他方案的优势在于:1. 支持修改富文本样式 2. Taro官方属性,比插件靠谱
使用这个属性存在两个问题需要解决
1、需要解决图片样式错乱问题
2、图片点击可放大
tips:
正常方式无法绑定事件,样式设置不生效
import { View, Image } from '@tarojs/components';
import { useLayoutEffect } from 'react';
import styles from './index.module.scss';
import Taro from '@tarojs/taro';
const Parse = ({ imgClick, node }) => {
useLayoutEffect(() => {
// 修改图片行内默认样式
(Taro as any).options.html.transformElement = el => {
if (el.nodeName === 'image') {
el.setAttribute('mode', 'widthFix');
// 图片增加点击事件
el.__handlers.tap = [() =>{
imgClick(el.props.src)
}]
}
return el;
};
}, [node]);
return (
<View className={styles.parse}>
<View dangerouslySetInnerHTML={{ __html: node }}></View>
</View>
);
};
export default Parse;
.parse image{
width: 100%!important;
}
import Parse from './components/parse/index'
// 点击图片放大
const imgClick =(e)=>{
console.log(e,'点击放大')
if (!e) return false;
Taro.previewImage({
current: e,
urls: [e]
});
}
<Parse imgClick={imgClick} node={content} />
真机测试没有问题
以上会丢失功能标签样式问题,建议使用插件
mp-html插件,原生写法, 不支持taro,可以使用原生混用的写法引入
Taro 文档文章来源:https://www.toymoban.com/news/detail-692515.html
小程序富文本组件文章来源地址https://www.toymoban.com/news/detail-692515.html
到了这里,关于Taro支持富文本(微信小程序)图片样式问题及可点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!