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

原创

已于 2023-03-02 16:46:16 修改 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

于 2023-02-27 16:50:46 首次发布

文章介绍了在React的Taro框架中如何利用dangerouslySetInnerHTML属性来支持富文本渲染，并解决图片样式错乱和点击放大问题。通过自定义transformElement函数，可以修改图片样式并添加点击事件。虽然存在一些限制，但提供了对富文本样式的支持和事件绑定的解决方案。

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;