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

这篇具有很好参考价值的文章主要介绍了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} />

taro 绑定点击事件,javascript,前端,react.js