在没有 onload 的情况下将函数附加到窗口 - React & Next.js答案

【问题标题】：Attach a function to the Window without onload - React & Next.js在没有 onload 的情况下将函数附加到窗口 - React & Next.js
【发布时间】：2021-10-15 12:53:43
【问题描述】：

问题

我有一个外部脚本在 React Next.js 项目中使用它。 https://app.lemonsqueezy.com/js/checkout.js

但是，当使用来自其他页面的next/link 组件打开页面时，脚本无法正常运行。我认为原因是上面的脚本基于onLoad函数附加到窗口，在Next.js中，onLoad在从另一个页面导航时不会触发。

所以我需要一种使用next/script 组件手动将函数附加到窗口的方法。

相应的结账 JS 在他们的脚本中有这样的东西。

function i() {
      window.LemonSqueezyCheckout ||
        (window.LemonSqueezyCheckout = new t());
    }
    window.addEventListener
      ? window.addEventListener("load", i)
      : window.attachEvent && window.attachEvent("onload", i);

所以我尝试使用next/script 组件添加到窗口，但它不起作用。

<Script src="https://app.lemonsqueezy.com/js/checkout.js"
        onLoad={() => {
         // Attach to window when loaded
         window.LemonSqueezyCheckout = new t()
        }} />

现场演示

https://nextjs-djqrvw.stackblitz.io

最小复制

https://stackblitz.com/edit/nextjs-djqrvw?file=pages%2Fnext.js

预期结果

即使使用next/link 从其他页面单击，脚本函数也应附加到窗口。一旦附上。点击弹出窗口将打开一个实际的弹出窗口，而不是导航到另一个页面。

任何帮助将不胜感激。

【问题讨论】：

onLoad={ } 是对象的符号。预计为onLoad={ "key1" : value1, "key2" : value2 }。相反，你在里面写了一个函数。 onLoad={() => {window.LemonSqueezyCheckout = new t()}}。这是无效的语法，您的控制台必须告诉您Uncaught SyntaxError: Unexpected token '('。移除外部{ }。它也是onload 而不是onLoad。 onload= () =>{ ... };
@JeremyThille 我认为包装在{ } 中是正确的格式，因为 React 期望像这样包装这些函数。所以，你的代码实际上给了我语法错误。另请参阅官方文档在这里写了onLoad：nextjs.org/docs/basic-features/… 你还能想到其他原因吗？
啊，对不起，那就别理我了。我对 React 几乎一无所知

标签： javascript reactjs next.js

【解决方案1】：

我使用的自定义脚本团队推出了一个新修复程序，其中包括该功能的刷新。所以现在我可以使用下面的代码来修复它。

import Script from "next/script";

export default function Page() {
  function lemonLoaded() {
    window.createLemonSqueezyCheckout();
  }
  return (
    <>
      <Script
        src="https://app.lemonsqueezy.com/js/checkout.js"
        strategy="lazyOnload"
        onLoad={() => {
          lemonLoaded();
        }}
      />
    </>
  );
}

【讨论】：