使用NextJS在TypeScript中设置计时器以将脚本附加到Body标记

mspsb9vt  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(159)

我对Typescript没有什么经验,我更像是一个使用react的香草JavaScript的人。
我的客户需要的是在初始页面加载之后加载一个聊天窗口小部件。我的想法是创建脚本的JSX元素,并使用计时器将其附加到document.body,但我遇到了 typescript 问题。我的代码如下所示,后面跟着错误:

const podiumScript = (
    <script
      src="https://connect.podium.com/widget.js#API_TOKEN=5bd8dac4-3041-4f32-a378-e8cd53634bbb"
      id="podium-widget"
    ></script>
  );

  window.setTimeout(() => document.body.append(podiumScript), 5000);

const podiumScript: JSX.Element
Argument of type 'Element' is not assignable to parameter of type 'string | Node'.ts(2345)

我想我正在尝试弄清楚如何将参数类型从Element更改为String或Node。
我试过使用'defer'属性,也试过使用Next Js的标签和它的策略lazyOnload,但是脚本需要更多的延迟。
如果有人确实使用Podium Chat小部件,并且知道一个属性来分配脚本以便稍后加载,这也会非常有帮助,但我不认为有一个。
谢谢所有读到这篇文章的人。

neekobn8

neekobn81#

你不应该把JSX和传统的DOM操作方法混在一起。正如错误所暗示的,你要追加的东西实际上不是一个HTML元素。它是一个JSX表达式(类型为JSX.Element),不能在那里使用。
请改用传统的DOM方法:

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

script.src = "https://connect.podium.com/widget.js#API_TOKEN=5bd8dac4-3041-4f32-a378-e8cd53634bbb";
script.id = "podium-widget";

// Should go in the head, too
window.setTimeout(() => document.head.append(podiumScript), 5000);

相关问题