如何仅在单个React组件中加载Enzuzo隐私政策脚本？

问题背景 #

需要仅在单个React组件中展示Enzuzo隐私政策，而非全站显示。直接将官方生成的脚本放在index.html会导致所有页面加载该组件；自行通过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;

解决思路及修改代码 #

关键调整点 #

• 确保脚本加载时目标容器#__enzuzo-root已存在，且脚本标识与官方生成代码一致
• 避免组件重复挂载时多次加载脚本
• 组件卸载时清理脚本，防止影响其他页面

修改后的组件代码 #

import React, { useEffect } from 'react';

const TermsOfService = () => {
    useEffect(() => {
        // 检查是否已加载过脚本，避免重复插入
        const existingScript = document.getElementById('__enzuzo-root-script');
        if (existingScript) {
            return;
        }

        // 获取目标容器
        const rootContainer = document.getElementById('__enzuzo-root');
        if (!rootContainer) {
            return;
        }

        // 创建并配置脚本
        const script = document.createElement('script');
        script.id = '__enzuzo-root-script';
        script.src = 'https://app.enzuzo.com/__en...'; // 替换为完整的官方脚本地址
        script.async = true;

        // 将脚本插入到目标容器之后，确保脚本执行时容器已存在
        rootContainer.parentNode.insertBefore(script, rootContainer.nextSibling);

        // 组件卸载时移除脚本
        return () => {
            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }
        };
    }, []);

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

export default TermsOfService;

代码说明 #

1. 重复加载校验：通过脚本id判断是否已加载，避免组件多次挂载时重复插入脚本
2. 容器存在性检查：确保目标容器存在后再创建脚本，避免DOM操作报错
3. 脚本插入位置：将脚本放在目标容器的相邻位置，保证脚本执行时容器已完成挂载，Enzuzo的脚本能正确找到渲染容器
4. 副作用清理：组件卸载时移除脚本，防止切换页面后脚本残留导致的异常

内容的提问来源于stack exchange，提问作者Yemaaan