React - 转换 HTML 脚本标签以异步加载 SDK

Question

目前我正在尝试通过他们的 SDK 将 snapchat 添加到网站

我目前的尝试，无法弄清楚如何将他们的 Dom 脚本转换为加载我的组件时要调用的函数：

export function snapchatSDK() {
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = 'https://sdk.snapkit.com/js/v1/create.js';
    document.head.append(script);
  });

}

class Platforms extends React.Component {

  componentDidMount() {
    snapchatSDK();
  }

render() {
    return (
      <div>
      <p> Share on Social Media Platforms</p>
      <h4>Snapchat<h4>
       <button 
         className="snapchat-creative-kit-share"
         data-share-url= urlTobeShared()
          >
         Share me 
       </button>

       <h4>Twitter<h4>
       <button>
         Share me 
       </button>

      <h4>Reddit<h4>
       <button>
         Share me 
       </button>
      </div>
    );
  }
}

这里也是该文档的链接： snap doc

Answer 1

你的例子并没有很清楚地说明你想要完成什么，但也许其中之一可以帮助你弄清楚？

选项1

尝试非官方的snapchat npm 包。（不知道这个包是否满足您的需要，购买也许您还没有看到它？）

选项2

在 HTML 中加载脚本

<script src="https://sdk.snapkit.com/js/v1/create.js" />
<script src="/path/to/your/bundle.js" />

如果在组件安装之前加载，它应该获取您的 HTML 并执行它所做的任何操作

选项3

也许尝试async = false在脚本上设置：

const script = document.createElement('script');
script.src = 'https://sdk.snapkit.com/js/v1/create.js';
script.async = false
document.head.append(script);

请参阅这篇文章和这篇SO 帖子。关键要点是：

默认情况下，动态创建并添加到文档中的脚本是异步的