在 React Web 应用程序中集成 Microsoft Teams 嵌入式共享按钮

问题描述

以下是我在 React 中集成 Microsoft Teams 嵌入式共享按钮的方法：

第 1 步：在我的网络应用中添加 launcher.js 脚本：

我接受了这个脚本：

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

并把它放在这个 useEffect 中：

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://teams.microsoft.com/share/launcher.js";
  script.async = true;
  script.defer = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
},[]);

第 2 步：在我的 web 应用程序中添加一个 HTML 元素，使用 team-share-button 类属性和 data-href 属性中的共享链接。 >

我接受了这个给定的代码：

<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>

然后我将其调整为 React：

<div
  className="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>

我的问题是：

该按钮显示在弹出模块中，并且我的 Microsoft Teams 嵌入式共享按钮在首次呈现弹出模块后消失。

解决方法

我找到了解决问题的方法。

Microsoft Teams Embedded Share 按钮显示在弹出模块中，因此我添加了负责显示弹出模式的状态 showPopupModal，作为 useEffect 的第二个参数。

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://teams.microsoft.com/share/launcher.js";
  script.async = true;
  script.defer = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
},[showPopupModal]);