ReactJS + Typescript - 如何在安装并完全加载另一个组件后渲染组件

Question

我想向我的 ReactJS/TS 应用程序添加一些外部脚本，并且我想将这些脚本添加到另一个组件中，而不是添加到 index.html 中。

if (root) {
  createRoot(root).render(
    <>
      <Scripts />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<PageWrapper />}>
            <Route index element={<UserEdit />} />
            <Route path="user/edit" element={<UserEdit />} />
            <Route path="user/:id" element={<UserPage />} />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  )
}

这就是我希望代码的样子。 Scripts 组件如下所示：

const Scripts = () => {
    const scripts: Scripts = ["frontend/js_clean/check.js","frontend/js_clean/user.js"...]
    return ({scripts.map(script => <script key={script} type="text/javascript" src={`${process.env.ASSETS_CDN}/${script}`}></script>)})
}

但问题是，在 Scripts 组件之后的组件使用外部脚本中的变量和函数，当我尝试启动应用程序时，它会给我一个错误，例如：

TypeError: window.isJsonString is not a function

window.isJsonString 被声明到 frontend/js_clean/user.js 脚本中，我尝试将其包含到 Scripts 组件中。所以我想知道是否有另一种方法可以将外部脚本添加到项目中，而无需将其硬编码到index.html中。

提前致谢！

Answer 1

React 就是将状态（广义上的）转换为 UI。所以，如果你正在加载其他东西，你必须用状态来表达它。

对于您的特定任务，设置一个状态变量来指示是否加载脚本。它将具有三个可能的值：“未加载”、“已加载”、“错误”。附加

onLoad

和

onError

处理程序您的脚本元素并相应地更改此状态。