如何只为一个组件加载脚本？

Question

我有这个生成的代码用于将隐私政策插入网站，但是如果我在 index.html 中设置这个脚本，我在所有页面上都有这个块，但我只需要一页（一个组件）。

<div id="__enzuzo-root"></div>
<script id="__enzuzo-root-script" src="..."></script>

另外，我在插入块到 <div id="__enzuzo-root" 时遇到问题...我添加了 useEffect 用于在渲染后插入脚本标签，但它不起作用

import React, { useEffect } from 'react';

const TermsOfService = _ => {
    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://app.enzuzo.com/__en...";
        script.async = true;
        document.body.appendChild(script);
    }, [])

    return (
        <React.Fragment>
            <div id="__enzuzo-root"></div>
        </React.Fragment>
    );
}

export default TermsOfService;

你有什么主意吗？

Answer 1

首先尝试在 DOM 实际呈现后运行的useLayoutEffect 。

其次，您的 div ID 与代码段不匹配。

您还可以检测脚本何时加载并触发页面加载事件，因为库可能正在侦听它。

const TermsOfService = _ => {
    useLayoutEffect(() => {
        const script = document.createElement("script");
        script.src = "https://app.enzuzo.com/__en...";
        script.async = true;
        script.onload = () => {
           dispatchEvent(new Event('load'))
           dispatchEvent(new Event('DOMContentLoaded'))
        }
        document.body.appendChild(script);
    }, [])

    return (
        <React.Fragment>
            <div id="__enzuzo-root"></div>
        </React.Fragment>
    );
}

export default TermsOfService;

Answer 2

我用了 iframe 一切正常

<iframe srcDoc={`<div id="__enzuzo-root-tos"></div><script src="..." type="text/javascript"></script>`} />

Answer 3

为了向 React 组件添加任何脚本，您必须使用一些包，例如 React Helmet。请访问此处并按照说明进行操作： https://www.npmjs.com/package/react-helmet