Taro支持富文本（微信小程序）图片样式问题及可点击事件

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 文档

   小程序富文本组件