Taro支持富文本（微信小程序）完美解决

需求：先说下需求，就是我们需要做活动页面，活动页面有个规则，规则的内容由B端后台配置海报页。页面如下

实现：

需要用到dangerouslySetInnerHTML属性即可，这个属性相比于其他方案的优势在于：1. 支持修改富文本样式 2. Taro官方属性，比插件靠谱

核心代码：index.tsx

// 修改图片行内默认样式
  (Taro as any).options.html.transformElement = (el) => {
    if (el.nodeName === image) {
      el.setAttribute(mode, widthFix);
    }
    return el;
  };
  
  return (
    <View className=content>
      <View className=text dangerouslySetInnerHTML={
         
  { __html: rule }} />
    </View>
  );

如果你的需求也是传图片，记得一定要修改mode，因为它默认是mode="scaleToFill"， 这会导致缩放，不能达到预期效果。所以下面代码一定要加。文末有所有代码

// 修改图片行内默认样式
  (Taro as any).options.html.transformElement = (el) => {
    if (el.nodeName === image) {
      el.setAttribute(mode, widthFix);
    }
    return el;
  };

来看成果：

完整代码:

index.ts

import { getUser, IglobalUser } from @/utils/getUser;

import { View } from @tarojs/components;
import Taro, { useRouter } from @tarojs/taro;
import { useEffect, useState } from react;
import { getActivityRule } from @/services/activity.service;
import ./index.scss;

const Rule = () => {
  const router = useRouter();
  const activityCode: string = router.params.activity_code || ;
  const [rule, setRule] = useState();
  // 获取规则
  const getRule = async () => {
    try {
      const globalUser: IglobalUser = await getUser();
      const { userId } = globalUser;
      const res = await getActivityRule({ activityCode, userId });
      if (res.status === 0) {
        setRule(res.result);
      }
    } catch (error) {}
  };
  useEffect(() => {
    getRule();
  }, []);
  // 修改图片行内默认样式
  (Taro as any).options.html.transformElement = (el) => {
    if (el.nodeName === image) {
      el.setAttribute(mode, widthFix);
    }
    return el;
  };

  return (
    <View className=content>
      <View className=text dangerouslySetInnerHTML={
         
  { __html: rule }} />
    </View>
  );
};
export default Rule;

index.scss

.content {
  .text {
    .h5-p {
      .h5-img {
        width: 100%;
        overflow: scroll;
        display: block;
      }
    }
  }
}