如何只為一個組件加載腳本？

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