如何在React.js中添加外部JS脚本？需封装可复用广告脚本组件

核心思路 #

要在多个位置复用广告组件且避免重复加载脚本，我们可以用React Hooks（useEffect + useRef）动态加载脚本，确保脚本仅加载一次，无论组件被调用多少次。

组件实现（函数组件版） #

import { useEffect, useRef } from 'react';

const LomadeeAdBanner = () => {
  // 标记脚本是否已加载，防止重复插入
  const scriptLoaded = useRef(false);

  useEffect(() => {
    if (scriptLoaded.current) return;

    // 创建广告脚本元素
    const adScript = document.createElement('script');
    adScript.src = '//ad.lomadee.com/banners/script.js?sourceId=37645311&dimension=27&height=90&width=970&method=0';
    adScript.type = 'text/javascript';
    adScript.language = 'javascript';

    // 脚本加载完成后更新标记
    adScript.onload = () => {
      scriptLoaded.current = true;
    };

    // 将脚本插入页面
    document.body.appendChild(adScript);

    // 组件卸载时清理脚本（可选，根据需求保留）
    return () => {
      if (adScript.parentNode) {
        adScript.parentNode.removeChild(adScript);
        scriptLoaded.current = false;
      }
    };
  }, []);

  // 广告容器，用于控制位置和样式
  return <div className="lomadee-ad-container" style={{ margin: '20px 0' }} />;
};

export default LomadeeAdBanner;

使用方法 #

在任何需要展示广告的组件中直接导入并使用即可：

import LomadeeAdBanner from './LomadeeAdBanner';

const ProductPage = () => {
  return (
    <div className="product-page">
      <h2>商品详情</h2>
      {/* 页面其他内容 */}
      <LomadeeAdBanner />
      {/* 更多内容 */}
      <LomadeeAdBanner />
    </div>
  );
};

注意事项 #

1. 避免重复加载：useRef的scriptLoaded标记确保脚本只会在第一个组件挂载时加载，后续调用组件不会重复插入脚本。
2. 容器样式：可以通过修改lomadee-ad-container的CSS类来控制广告的间距、对齐方式等。
3. 自定义容器（可选）：如果广告脚本需要指定渲染容器ID，可以给组件添加动态生成的唯一ID（避免ID冲突），并根据Lomadee文档调整脚本参数或调用渲染方法：

import { useEffect, useRef, useState } from 'react';

const LomadeeAdBanner = () => {
  const scriptLoaded = useRef(false);
  // 生成唯一容器ID
  const [containerId] = useState(`lomadee-ad-${Math.random().toString(36).slice(2, 10)}`);

  useEffect(() => {
    if (scriptLoaded.current) return;

    const adScript = document.createElement('script');
    adScript.src = '//ad.lomadee.com/banners/script.js?sourceId=37645311&dimension=27&height=90&width=970&method=0';
    adScript.type = 'text/javascript';
    adScript.language = 'javascript';

    adScript.onload = () => {
      scriptLoaded.current = true;
      // 如果需要手动触发渲染到指定容器，调用对应方法（示例，需参考Lomadee官方文档）
      // if (window.lomadeeRender) window.lomadeeRender(containerId);
    };

    document.body.appendChild(adScript);

    return () => {
      if (adScript.parentNode) {
        adScript.parentNode.removeChild(adScript);
        scriptLoaded.current = false;
      }
    };
  }, []);

  return <div id={containerId} className="lomadee-ad-container" />;
};

export default LomadeeAdBanner;

内容的提问来源于stack exchange，提问作者Alexandre Mélega