如何解决在 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]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。