在React SPA中通过id调用脚本片段，内容仅在刷新时加载

Question

开发React应用程序，该应用程序使用OneTrust cookie脚本中的第三方JS脚本。他们的脚本确实不是为SPAs设计的。现在，我只是在div中按ID调用脚本部分，而不调用其他部分，因为整个脚本都停在项目的其他地方——没有什么特别的。我有一个简单的CookiePolicy.jsx组件，如下所示：

const CookiePolicy = () => {
return <div id=“cookieHTMLSnippet” />
}

该片段基于父脚本的HTML提供了大量文本和一些表。父脚本可以称为类似cookie-policy.js的东西

问题是它只加载页面重新加载时的内容。我没有太多的代码可以共享，但我只能想用getElementById做一些奇怪的事情，以某种方式将一些状态连接到它，并将其放置在useEffect中，然后使用dangerouslySetInnerHTML强制加载内容。有没有一种更简单、更优雅的方法来处理这个问题？我相信我不是唯一一个在SPA中与第三方脚本作斗争的人。。。

需要注意的是，在这种情况下，更改脚本的位置或我调用该ID本身的位置不是一个选项。

Answer 1

感谢大家的评论，并感谢@adsy的建议！

我第一次错过了一个公开的函数(initializeCookiePolicyHtml(，它生成HTML，这使它变得更简单。

最终实现如下：

useEffect(() => {
typeof window.OneTrust !== 'undefined' && window.OneTrust.initializeCookiePolicyHtml(true)
}, [])
return <div id="cookieHTMLSnippet" />
}```

Answer 2

您可以尝试综合触发它所侦听的事件(我在下面做了一个有根据的猜测(——但它很难，很可能会对其他可能正在侦听的脚本产生连锁反应。如果它是一个你无法控制的脚本，请彻底检查开发文档，因为这些东西经常会在window上放置一个全局函数，你可以调用它来强制它再次检查DOM。有时它是没有记录的。请检查开发工具中的window，以了解此脚本所填充的内容。

这将是可取的，但如果不是：

const CookiePolicy => {
// Layout effect waits for DOM to render
useLayoutEffect(() => {
dispatchEvent(new Event('load'))
dispatchEvent(new Event('DOMContentLoaded'))
}, [])
return (
return <div id=“cookieHTMLSnippet” />
);
}