React嵌入含模块Script的足球API组件报错，求快速解决办法

1. 解决「Cannot use import statement outside a module」错误 #

你动态创建script时遗漏了原标签里的type="module"属性，这是导致语法错误的核心原因——该widget脚本是ES模块，必须声明类型才能正常运行。

2. 正确渲染容器DIV与配置属性 #

不需要手动将data-host、data-key等属性作为请求头发送，widget脚本会自动读取容器DIV上的data-*属性来完成配置。在React中只需用JSX正常渲染该DIV，注意将class改为React支持的className。

3. 完整组件示例 #

import { useEffect } from 'react';

const FootballLiveScore = () => {
  useEffect(() => {
    // 避免重复加载脚本
    let script = document.querySelector('script[src="https://widgets.api-sports.io/football/1.1.8/widget.js"]');
    
    if (!script) {
      script = document.createElement('script');
      script.src = 'https://widgets.api-sports.io/football/1.1.8/widget.js';
      script.type = 'module'; // 必须添加，解决模块语法错误
      script.async = true;
      document.body.appendChild(script);
    }

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

  return (
    <div
      id="wg-api-football-livescore"
      data-host="api-football-v1.p.rapidapi.com"
      data-refresh="60"
      data-key="Your-Api-Key-Here" // 替换为你的有效API Key
      data-theme=""
      data-show-errors="false"
      className="api_football_loader"
    />
  );
};

export default FootballLiveScore;

额外注意事项 #

• 确保你的API Key已在API-Sports平台完成认证并开通相关权限，否则widget无法正常获取数据。
• 调试时可将data-show-errors改为true，方便查看控制台的错误信息定位问题。

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