javascript - 如何在 react 中加载自定义脚本？-6ren

javascript - 如何在 react 中加载自定义脚本？

转载作者：行者123 更新时间：2023-12-03 21:07:00

26

4

这有点类似于这个问题:
Adding script tag to React/JSX
但就我而言，我正在加载这样的脚本:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','ID');</script>
<!-- End Google Tag Manager -->

现在我知道谷歌标签管理器有一个 npm 包，但我很好奇如果我想以自定义方式执行此操作，我该怎么做？
在上面的问题中，我看到了很多:

const script = document.createElement("script");

script.src = "https://use.typekit.net/foobar.js";
script.async = true;

document.body.appendChild(script);

这很好，但如果我在加载的脚本中有一个函数，我将如何正确执行它？

最佳答案

要添加这样的随机脚本，您可以:

将脚本添加到您的 index.html

将代码粘贴到文件中并使用导入语句。

一旦用户做某事，使用代码拆分动态加载脚本。

1. 将脚本添加到您的 HTML
只需将脚本标签粘贴在 index.html 文件中，最好放在正文标签的末尾。如果使用 create-react-app，则 index.html 文件位于公共(public)目录中:

<body>
  <div id="root"></div>
  <script>/* your script here */</script>
</body>

2.从文件导入
或者，您可以将脚本粘贴到 .js 文件中，然后从代码中的任何位置导入它。导入通用脚本的好地方是您的 index.js 入口点文件。这种方法的好处是将脚本包含在您的 js 包的其余部分中，从而实现缩小和摇树。

// index.js
import "../path/to/your/script-file";

3. 代码拆分
最后，如果您想在某个时间点动态加载一段 js 代码，同时确保它不是您的起始包的一部分，您可以使用动态导入进行代码拆分。 https://create-react-app.dev/docs/code-splitting

function App() {
  function handleLoadScript() {
    import('./your-script')
      .then(({ functionFromModule }) => {
        // Use functionFromModule 
      })
      .catch(err => {
        // Handle failure
      });
  };

  return <button onClick={handleLoadScript}>Load</button>;
}

关于javascript - 如何在 react 中加载自定义脚本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66153252/

26

4

0

文章推荐： Haskell 的性能改进

文章推荐： iphone - 在 iPhone 中的 UIWebView 中停止 Ajax 请求

php - 在 PHP 中加/除数字
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是，它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
javascript - 我需要将一个整数除以 12，如果结果是 float ，则在 javascript 中加 1
我只是无法弄清楚这一点，也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录，并在我的网页上以每个面板 12 条的倍数显示它们。因此，我需要知道有多少个面板可以使用 JavaScrip

首页

博学

6Ren·AI

商城

javascript - 如何在 react 中加载自定义脚本？