时间戳

首页 > 解决方案 > 如何将自定义 JS 文件包含到我的 React 应用程序中？

reactjs - 如何将自定义 JS 文件包含到我的 React 应用程序中？

问题描述

我是 React 的初学者，正在做一个项目。为此，我在网上购买了一个适合我要求的模板。但是那个项目没有反应。因此，我将该项目转换为 React 组件。但是，我对如何包含自定义 javascript 文件感到困惑。这些自定义的 JS 文件有自己的功能。例如，我有一个 HTML 侧边栏，我将该侧边栏文件从 HTML 转换为反应组件。然后，我包含 CSS 和引导文件。像这样。

import 'bootstrap/dist/css/bootstrap.css';

但是，如何包含自定义 javascript 文件。我下载的模板有它的javascript文件有它们的功能。所以，如果我在我的反应项目中包含这些文件，反应文件仍然会出错。

Module not found: Can't resolve './components/Sidebar' in '/app/src'

因为侧边栏文件使用了自定义 js 文件中的函数。有没有办法在 React 中添加自定义 JS 文件，如果是，那么如何在 React 应用程序中使用自定义 js 文件中的函数？

请指导我。任何帮助，将不胜感激。

标签： reactjs

解决方案

我认为您应该尝试导入整个js文件（带有扩展名）。

但无论如何，将外部 vanilla js 文件附加到您的文档（我认为）的最简单方法是在 中进行useEffect，如下所示：

useEffect(() => {
  const script = document.createElement('script');
  script.src = "/app/src/components/Sidebar.js";
  script.async = true;
  document.body.appendChild(script);
return () => {
    document.body.removeChild(script);
  }
}, []);

推荐阅读