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

【问题标题】：React - Converting HTML script tag to load an SDK asynchronouslyReact - 转换 HTML 脚本标签以异步加载 SDK
【发布时间】：2020-07-31 23:35:22
【问题描述】：

目前我正在尝试通过他们的 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

【问题讨论】：

您有什么问题吗？究竟是什么问题

标签： html reactjs asynchronous dom sdk

【解决方案1】：

我认为主要问题是您如何尝试动态加载脚本。我猜这就是你想要做的。如果是这样，还有几个步骤。这是一个比较示例的链接，其中包含其中一些示例： https://www.newline.co/fullstack-react/articles/Declaratively_loading_JS_libraries

【讨论】：

【解决方案2】：

如果您使用 parcel2 或 webpack4（或 create-react-app），那么您可以使用动态导入，最重要的是不使用 issue

不过代码很简单

    import("https://sdk.snapkit.com/js/v1/create.js").then(_snap =>
      setSnap(_snap)
    );

如果你遇到这个问题，你可以使用

    import(/* webpackIgnore: true */ "https://sdk.snapkit.com/js/v1/create.js").then(
      _snap => setSnap(_snap)
    );

【讨论】：

【解决方案3】：

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

选项 1

试试非官方的snapchat npm package。（不知道这个包是否满足你的需要，买也许你还没见过？）

选项 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);

请参阅this article 和此SO post。关键要点是：

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

【讨论】：