如何在React.js中通过div加载外部<script>以展示第三方小部件？

嘿，我来帮你搞定这个React里嵌入第三方机票查询Widget的问题！

你之前尝试的方法有个关键问题：你只是创建了script元素，但没有把它实际添加到DOM树中，而且React的JSX不会自动处理你手动创建的DOM节点，所以第三方脚本根本找不到要初始化的#widget容器，自然无法生效。

下面给你两种可行的实现方案，分别适配函数组件和类组件：

方案一：函数组件（使用useEffect钩子） #

这是现在React项目的主流写法，利用useEffect在组件挂载后完成脚本的插入和清理：

import { useEffect } from 'react';

function OfferBrowser() {
  useEffect(() => {
    // 1. 创建script标签
    const script = document.createElement('script');
    script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
    script.async = true;

    // 2. 获取目标容器，把script插入到容器内部（或body）
    const widgetContainer = document.getElementById('widget');
    widgetContainer?.appendChild(script);

    // 3. 组件卸载时清理script，避免内存泄漏和重复加载
    return () => {
      widgetContainer?.removeChild(script);
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
  );
}

export default OfferBrowser;

为什么这个方案有效？ #

• useEffect的回调会在组件挂载完成后执行，此时#widget已经被渲染到真实DOM中，第三方脚本加载后能直接找到目标容器初始化。
• 清理函数会在组件卸载时移除script标签，避免页面中残留冗余脚本，也防止组件重新挂载时重复加载脚本引发冲突。

方案二：类组件（使用生命周期钩子） #

如果你还在使用类组件，可以用componentDidMount和componentWillUnmount来实现相同逻辑：

import React, { Component } from 'react';

class OfferBrowser extends Component {
  componentDidMount() {
    // 创建并插入script标签
    const script = document.createElement('script');
    script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
    script.async = true;
    
    const widgetContainer = document.getElementById('widget');
    if (widgetContainer) {
      widgetContainer.appendChild(script);
    }
    // 保存script引用，方便卸载时移除
    this.widgetScript = script;
  }

  componentWillUnmount() {
    // 清理脚本
    const widgetContainer = document.getElementById('widget');
    if (widgetContainer && this.widgetScript) {
      widgetContainer.removeChild(this.widgetScript);
    }
  }

  render() {
    return (
      <div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
    );
  }
}

export default OfferBrowser;

额外注意事项 #

• 确保页面中#widget的id是唯一的，避免多个相同id元素导致Widget初始化错误。
• 如果你的Widget需要根据props动态更新（比如data-affiliate变化时重新初始化），可以把对应的props添加到useEffect的依赖数组中（函数组件），然后在回调里先移除旧脚本，再创建新脚本插入。

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