React集成Microsoft Teams嵌入式分享按钮后弹窗内首次渲染消失问题

• 时机不匹配：Teams提供的launcher.js加载完成后仅会执行1次全局DOM扫描，自动将所有带.teams-share-button类的元素替换为渲染完成的分享按钮。如果脚本加载完成时弹窗还未渲染，脚本无法识别弹窗内的按钮元素，弹窗渲染后对应位置仅保留空的原始div，看起来就像按钮消失了。
• React虚拟DOM冲突：如果脚本先完成了按钮的替换渲染，后续弹窗组件因状态更新触发重渲染时，React会比对虚拟DOM与真实DOM结构，发现真实DOM（脚本生成的按钮结构）和虚拟DOM中记录的原始div结构不一致，会直接用虚拟DOM的原始div覆盖已生成的按钮DOM，导致按钮消失。

1. 调整全局脚本加载逻辑 #

不要在弹窗组件内加载脚本，也不要在组件卸载时删除脚本，避免重复加载，放在应用根组件全局加载一次即可：

// App.jsx/根组件内添加
useEffect(() => {
  // 判重避免重复加载脚本
  if (document.querySelector('script[src="https://teams.microsoft.com/share/launcher.js"]')) {
    return
  }
  const script = document.createElement('script')
  script.src = "https://teams.microsoft.com/share/launcher.js"
  script.async = true
  script.defer = true
  document.body.appendChild(script)
}, [])

2. 弹窗显示时手动触发按钮渲染 #

launcher.js加载完成后会在window对象上挂载shareToMicrosoftTeams实例，其提供的renderButtons方法可以手动触发DOM扫描与按钮渲染，在弹窗组件内监听弹窗显示状态调用即可：

// 弹窗组件内添加，visible为控制弹窗显隐的状态变量
useEffect(() => {
  if (visible && window.shareToMicrosoftTeams) {
    window.shareToMicrosoftTeams.renderButtons()
  }
}, [visible])

3. 避免虚拟DOM冲突覆盖 #

给分享按钮的div添加动态key，每次弹窗显示时强制React重新创建元素，避免DOM比对冲突：

<div
  key={`teams-share-${visible}`}
  className="teams-share-button"
  data-href="https://<link-to-be-shared>"
></div>

如果仍有问题，可以用dangerouslySetInnerHTML生成按钮元素，跳过React的虚拟DOM比对：

<div 
  dangerouslySetInnerHTML={{
    __html: `<div class="teams-share-button" data-href="https://<link-to-be-shared>"></div>`
  }}
/>

内容的提问来源于stack exchange，提问作者Tanya Tsodikovich