Question

我正在为我的项目使用最新的create-ract-app版本，并且我有一个custom.js文件，其中包含CustomFunction个功能。我需要从我的一个组件访问CustomFunction函数。

实现这一目标的最佳方式是什么？将文件导入index.html，如下所示，我遇到'CustomFunction' is not defined no-undef'错误：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <!-- jQuery import -->
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <!-- Custom Style and JS import -->
    <link rel="stylesheet" href="./CustomComponent/custom.css">
    <script src="./CustomComponent/custom.js"></script>

这是项目结构：

10 ├── public
 11 │   ├── customComponent
 12 │   │   ├── custom.js
 13 │   │   └── custom.css
 14 │   ├── favicon.ico
 15 │   ├── index.html
 16 │   └── manifest.json

Answer 1

您需要做的是导出custom.js文件的函数表单，如

const CustomFunction = () => {

}

export {CustomFunction};

现在您可以在任何组件中导入它，例如

import {CustomFunction} from './path/to/custom.js';

如果你在component.js中有多个，你想在其他组件中使用它们，那么你可以像

那样导出它们

export {
    CustomFunction,
    CustomVariable,
    CustomVar2,
    CustomFunction2
}

导入如

import {CustomFunction, CustomVariable, CustomVar2, CustomFunction2} from './path/to/custom.js';

在create-react-app中导入自定义JS

1 个答案: