如何在React组件中加载含document.write的指定外部脚本？

我懂你这种头疼的情况——之前试过常规的React加脚本方法没用，对吧？主要是因为这个脚本是动态生成的，还用到了document.write，和React的虚拟DOM机制不太兼容。给你两个亲测有效的解决方案，你可以根据情况选：

方案1：利用useEffect动态创建脚本（函数组件） #

这是最稳妥的方式，完全避开React虚拟DOM的限制，直接操作原生DOM来加载脚本，还能处理参数变化的情况：

import { useEffect } from 'react';

function EventDropdown({ bid, site }) {
  useEffect(() => {
    // 先检查页面里有没有已经加载过的目标脚本，避免重复插入
    const existingScript = document.getElementById('ticket-transaction-script');
    
    if (existingScript) {
      // 如果参数变化了，更新脚本的src重新加载
      existingScript.src = `http://tickettransaction.com/?bid=${bid}&sitenumber=${site}&tid=event_dropdown`;
      return;
    }

    // 创建新的script元素
    const script = document.createElement('script');
    script.src = `http://tickettransaction.com/?bid=${bid}&sitenumber=${site}&tid=event_dropdown`;
    script.id = 'ticket-transaction-script'; // 标记ID方便后续检查
    script.async = true; // 异步加载不阻塞页面渲染

    // 可选：监听脚本加载成功/失败的状态
    script.onload = () => console.log('票务脚本加载完成');
    script.onerror = () => console.error('票务脚本加载失败');

    // 把脚本插入到页面body里
    document.body.appendChild(script);

    // 组件卸载时移除脚本，避免内存泄漏
    return () => {
      if (script && document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [bid, site]); // 当bid或site参数变化时，重新执行副作用

  // 脚本需要挂载的容器，注意id要和脚本的tid参数对应（event_dropdown）
  return <div id="event_dropdown"></div>;
}

export default EventDropdown;

方案1的优势： #

• 完全兼容跨域场景（script标签不受CORS限制）
• 自动处理参数更新，参数变化时会重新加载脚本
• 有清理逻辑，避免组件卸载后残留无用脚本

方案2：获取脚本内容后插入指定容器（适配document.write场景） #

如果原脚本依赖document.write输出内容，这种方式可以避免document.write在React环境下可能导致的页面覆盖问题：

import { useEffect, useRef } from 'react';

function EventDropdown({ bid, site }) {
  // 用ref绑定脚本要渲染的容器
  const containerRef = useRef(null);

  useEffect(() => {
    const scriptUrl = `http://tickettransaction.com/?bid=${bid}&sitenumber=${site}&tid=event_dropdown`;

    // 先获取脚本的文本内容
    fetch(scriptUrl)
      .then(res => res.text())
      .then(scriptContent => {
        if (!containerRef.current) return;
        
        // 清空容器旧内容，插入新的脚本元素
        containerRef.current.innerHTML = '';
        const script = document.createElement('script');
        script.textContent = scriptContent;
        containerRef.current.appendChild(script);
      })
      .catch(err => console.error('获取票务脚本失败:', err));
  }, [bid, site]);

  return <div ref={containerRef} id="event_dropdown"></div>;
}

export default EventDropdown;

方案2的注意点： #

• 需要目标服务器允许CORS跨域请求，否则fetch会失败（如果遇到跨域问题，优先用方案1）
• 要确保外部脚本是安全可信的，避免XSS风险

通用注意事项： #

• 确保bid和site是组件可用的参数（可以通过props传入，或者从组件状态中获取）
• 脚本的tid=event_dropdown参数对应页面上的容器id，所以组件里一定要渲染出id="event_dropdown"的元素，脚本才能正确挂载内容
• 如果是类组件，可以把useEffect的逻辑替换到componentDidMount和componentDidUpdate生命周期里，逻辑是一致的

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