【前端】自动回复点击生成新的自动回复：下发html在前端生成dom，点击调用方法

场景

自动回复会下发内容和链接，点击链接会自动回复新的内容，像淘宝等的自动回复。
服务端下发的是html标签，如：

"<div class="link" @click="autoReply(1,2)">aaaaa</div>"

下发的内容已经写了类和方法，并传入参数。

目标：实现点击下发的链接调用对应方法，完成自动回复。

技术栈：svelte。

代码

下发的链接有link类，因此在全局写link的css样式：

 .link {
   color: #4ea1db;
 }

由于下发的链接不会经过svelte编译器，因此不会点击后自动触发方法，需要手动去调用。

直接获取链接的DOM元素，在afterUpdate生命周期（即DOM更新后）添加点击自动回复的事件。注意，在添加之前需要将之前的事件监听清空。否则会点一次触发多次。

在handleAutoReply 中获取参数，手动调用getAutoReply方法。

在销毁页面onDestroy时移除事件监听。

  afterUpdate(() => {
    autoLink = document.getElementsByClassName('link-style');
    
	for (let i = 0; i < autoLink.length; i++) {
	  autoLink[i].removeEventListener('click', handleAutoReply);
	}

    // 添加点击自动回复
    for (let i = 0; i < autoLink.length; i++) {
      autoLink[i].addEventListener('click', handleAutoReply);
    }
  });

  //   处理下发的html中的点击事件
  const handleAutoReply = (event) => {
    const replyValue = event.target.attributes[1].value; //eg:getAutoReply(809,6)
    const matches = replyValue.match(/\d+/g);
    const id = Number(matches[0]); // 809
    const key = Number(matches[1]); // 6
    getAutoReply(id, key);
  };

  onDestroy(() => {
    // 移除事件监听器
    for (let i = 0; i < autoLink.length; i++) {
      autoLink[i].removeEventListener('click', handleAutoReply);
    }
  });

// 调取自动回复的接口
 const getAutoReply = (id,key)=>{ ... }

getAutoReply 方法返回自动回复的内容，把它加到自动回复的列表中。由于是svelte，需要显式地更新列表。

$ :list =[] // 响应式的声明

// getAutoReply拿到结果后
list =[...list] // 显式更新列表

HTML中，如果是下发带标签的自动回复，则：

{@html listItem.content}