Taro框架开发小程序的过程中，因需展示管理系统富文本编辑返回的图片，视频，对于视频拓展美观度有一定自定义要求，调研查阅资料得出如下解决方案

需要解决如下几个在微信小程序使用的问题

1. 小程序的rich-text内容在一定高度下会自动出现滚动条，不会自动撑开高度
2. rich-text无法设置动态自定义组件
3. 因为 RichText 组件只支持部分 HTML 标签，并且不支持外部样式和复杂的多媒体元素如处理带有link或者video标签的 HTML 代码
4. 使用dangerouslySetInnerHTML存在一定的局限性，虽然能解决上诉问题，但是对于视频的自定义controls无能为力
5. 使用dangerouslySetInnerHTML做图片或者视频的点击，需要对于字符串进行额外的标签定义，例如id或者类名

使用动态组件映射将 HTML 字符串转换为组件列表来渲染

1. 解析 HTML 字符串：可以使用一个库来解析 HTML，比如 htmlparser2，然后在 Taro 中通过 JSX 来渲染组件。
2. 手动替换标签：编写代码解析并渲染 video、img、p 等标签。
3. htmlparser2 可以帮助你动态解析 HTML 字符串并转换成 Taro 小程序支持的组件。

import Taro from '@tarojs/taro';
import { View, Video, Image, Text } from '@tarojs/components';
import htmlParser from 'htmlparser2'; // 需要安装 htmlparser2 库

const RichTextParser = ({ htmlContent }) => {
  const renderContent = (content) => {
    const elements = [];

    // 解析 HTML 字符串
    const parser = new htmlParser.Parser({
      onopentag(name, attrs) {
        if (name === 'video') {
          elements.push(
            <Video
              key={attrs.id}
              src={attrs.src}
              style={{ margin: 0, display: 'block' }}
              controls
            />
          );
        } else if (name === 'img') {
          elements.push(
            <Image
              key={attrs.src}
              src={attrs.src}
              mode="widthFix"
              style={{ marginBottom: '10px' }}
            />
          );
        } else if (name === 'p') {
          elements.push(<View key={elements.length} style={{ marginBottom: '10px' }} />);
        }
      },
      ontext(text) {
        if (text.trim()) {
          elements.push(<Text key={elements.length}>{text}</Text>);
        }
      },
    });
    
    parser.write(content);
    parser.end();

    return elements;
  };

  return <View>{renderContent(htmlContent)}</View>;
};

export default function App() {
  const htmlString = `
    <div class="ql-container ql-snow">
      <div class="ql-editor">
        <video id='video'
          src='dd.mp4'
          style='margin: 0;display: block'/>
        <p><img src="xxx.jpg"></p>
        <p>测试阿萨</p>
        <p><img src="xxx.jpg"></p>
      </div>
    </div>
  `;

  return (
    <View>
      <RichTextParser htmlContent={htmlString} />
    </View>
  );
}

通常上诉内容可以正常使用了，但是因为htmlparser2可能在装的时候版本会出现使用的问题，因此,当出现模块引入不争取的时候，可以使用如下方法

import { Parser } from 'htmlparser2';

// 注意
// new htmlParser.Parser 变更为 new Parser