Taro开发遇到的问题1：给富文本添加绑定事件

背景

1. 技术栈：Taro
2. 端：微信小程序
3. 运营会在后台使用富文本编辑器配置活动详情。
   一段富文本中，有若干a链接，将其渲染至小程序，需要在点击a链接的时候做一些操作，比如复制该链接，或者是在小程序中打开该链接。

难题

渲染富文本使用dangerouslySetInnerHTML或者RichText，最终都会变成taroelement，然后生成对应平台的元素。无法从这些元素中直接找出哪个是一个a链接，也就没办法绑定点击时间

解决

1. 找到a链接对应的元素
2. 绑定点击事件

观察渲染到页面的元素，可以发现链接渲染的元素，类名都是h5-a。那么我们可以通过类名定位到元素。然后在给这个元素绑定事件即可。

参考官方文档：
Taro官方文档-渲染HTML

transformElement:该函数第一个参数的值为 Taro 默认处理好的 TaroText，第二个参数是 HTML
解析器解析好的 Text，最后返回的 TaroText 对象参与 HTML 中的字符串渲染。

TaroText的结构是这样的

其中，handlers是绑定的事件。此处需要绑定点击事件：tap。注意，此处tap的值是一个数组，数组第一个值是改点击事件tap要触发的函数。

代码实现

//渲染html
<View dangerouslySetInnerHTML={{__html: desc}}>
 {
    //富文本的H5，有统一的类名h5-a，给它添加自定义事件，将当前的href属性传入
    //@ts-ignore
    Taro.options.html.transformElement = (el) => {
      console.log(el);
      
      //链接添加点击自动复制功能
      if (el.props.class == 'h5-a') {
        //给它添加自定义事件，将当前配置的链接属性传入
        el.__handlers.tap = [() => this.h5Click(el.props)]
      }

      //将view标签替换成text标签,则可以添加select属性，实现长按选择
      if (el.tagName === 'VIEW') {
        el.tagName = 'TEXT';
        el.h5tagName = 'span';
        el.nodeName = 'text';
        el.props = {class: "h5-span", selectable: true, userSelect: true};
      }
      return el;
    }
  }
</View>

在h5Click中做自己想做的