React + Vite：构建过程干扰小部件

Question

我正在制作一个像 Fotmob 一样的足球应用程序（react + vite），并且我正在使用 api-football 来获取 api 数据。我正在尝试将他们的小部件集成到我的应用程序中。

该小部件在index.html（静态资源）文件中使用时工作正常。当我将小部件放入反应组件中时，什么也没有显示。

我正在制作一个像 Fotmob 一样的足球应用程序（react + vite），并且我正在使用 api-football 来获取 api 数据。我正在尝试将他们的小部件集成到我的应用程序中。

该小部件在index.html（静态资源）文件中使用时工作正常。当我将小部件放入反应组件中时，什么也没有显示。

小部件=

<div id="wg-api-football-standings"
    data-host="v3.football.api-sports.io"
    data-key="api_key"
    data-league="39"
    data-team=""
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

在反应应用程序中使用它

import React, {useEffect} from 'react'

export default function App(){
    
    useEffect(() => {
        
        const myScript = document.createElement('script')
        
        myScript.src = 'https://widgets.api-sports.io/2.0.3/widgets.js'

        myScript.type = 'module'

        myScript.defer = true

        document.head.appendChild(myScript)
    },[])

    return(
        <div 
            id="wg-api-football-standings"
            data-host="v3.football.api-sports.io"
            data-key="api_key"
            data-league="39"
            data-team=""
            data-season="2023"
            data-theme=""
            data-show-errors="false"
            data-show-logos="true"
            className="wg_loader">
        </div>
    )

}

我也尝试过仅将标签放在index.html标签中，并从Widget组件中删除useEffect，但这也没有解决问题。

我也尝试过使用 webpack 进行相同的处理，但没有成功。

我认为构建过程正在产生问题。

Answer 1

在 React 中，

useEffect

函数仅在视图（UI）渲染后运行。 在您的示例中，当将应用脚本的逻辑放置在

useEffect

内时，它不会触发重新渲染，因此 UI 将无法工作。

你可以尝试将脚本移动到 HTML 文件中，React 只渲染 JSX