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

Posted

技术标签:

【中文标题】React - 转换 HTML 脚本标签以异步加载 SDK【英文标题】:React - Converting HTML script tag to load an SDK asynchronously 【发布时间】: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

【问题讨论】:

您有什么问题吗?究竟是什么问题 【参考方案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。关键要点是:

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

【讨论】:

以上是关于React - 转换 HTML 脚本标签以异步加载 SDK的主要内容,如果未能解决你的问题,请参考以下文章

为啥在html的script标签中写如下代码可以实现javascript脚本的异步加载?

JavaScript异步编程 异步的脚本加载

捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项

通过动态创建的脚本标签异步加载 JavaScript 的 CORS 问题

javascript脚本异步加载的几种方式

前端性能优化-异步加载