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脚本的异步加载?
捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项