如何让Script标签在Vite-React中始终渲染？预订按钮消失问题

核心原因 #

React组件重新渲染（包括页面刷新）时，直接嵌入JSX的第三方<script>标签不会自动重新执行，导致预订按钮的初始化逻辑无法触发，最终按钮消失。

解决方法 #

1. 用useEffect动态加载脚本 #

在需要显示预订按钮的组件中，通过useEffect钩子动态创建并注入脚本，确保每次组件挂载（包括刷新后）都能重新加载并执行脚本：

import { useEffect } from 'react';

function BookingButton() {
  useEffect(() => {
    // 检查是否已存在该脚本，避免重复加载
    const existingScript = document.getElementById('booking-script');
    if (existingScript) {
      // 如果脚本已存在，手动触发初始化（如果第三方提供了初始化函数）
      if (window.initBookingButton) {
        window.initBookingButton();
      }
      return;
    }

    // 创建新的script标签
    const script = document.createElement('script');
    script.id = 'booking-script';
    script.src = '你的第三方预订脚本URL'; // 替换为实际的脚本地址
    script.async = true;

    // 脚本加载完成后，触发初始化（如果需要）
    script.onload = () => {
      if (window.initBookingButton) {
        window.initBookingButton();
      }
    };

    // 将脚本添加到页面body
    document.body.appendChild(script);

    // 组件卸载时清理脚本（可选，根据需求）
    return () => {
      if (script && document.body.contains(script)) {
        document.body.removeChild(script);
        // 如果有全局变量，也可以清理
        delete window.initBookingButton;
      }
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 第三方脚本会渲染按钮的容器，这里预留容器
  return <div id="booking-button-container"></div>;
}

export default BookingButton;

2. 手动调用第三方脚本的初始化函数 #

如果第三方预订服务提供了明确的初始化函数（比如initBooking()），在脚本加载完成后手动调用该函数，强制重新渲染按钮。比如上面代码中的window.initBookingButton()就是这个逻辑。如果不确定函数名，可以查看第三方提供的文档，或者在浏览器控制台打印window对象查找相关方法。

3. 处理路由切换场景（单页应用） #

如果你的React应用是单页应用（SPA），路由切换后也会出现按钮消失的情况，需要将useEffect的依赖数组加上路由相关的变量（比如useLocation()返回的pathname），确保路由切换时重新执行脚本加载逻辑：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function BookingButton() {
  const location = useLocation();

  useEffect(() => {
    // 清理旧脚本
    const oldScript = document.getElementById('booking-script');
    if (oldScript) {
      document.body.removeChild(oldScript);
    }

    // 创建新脚本并加载
    const script = document.createElement('script');
    script.id = 'booking-script';
    script.src = '你的第三方预订脚本URL';
    script.async = true;
    script.onload = () => {
      if (window.initBookingButton) {
        window.initBookingButton();
      }
    };
    document.body.appendChild(script);

    return () => {
      if (script && document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [location.pathname]); // 路由变化时重新执行

  return <div id="booking-button-container"></div>;
}

注意事项 #

• 替换代码中的你的第三方预订脚本URL为实际的脚本地址，以及initBookingButton为第三方提供的真实初始化函数名（如果有的话）。
• 有些第三方脚本会自动查找页面中的特定容器（比如id="booking-widget"），确保你的组件中预留了对应的容器元素。
• 如果脚本加载有跨域问题，需要确认第三方服务是否允许你的域名访问，或者是否需要配置CORS。

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