如何在 React js 中导入 - Javascript

在 React js 中导入 Javascript 文件和模块是非常常见的需求，本文将介绍在 React js 中进行 Javascript 导入的几种方式。

使用 ES6 Imports

使用 ES6 的 import 语法来导入 Javascript 文件或模块是 React 中最流行的方式。此方法简洁、直观且易于维护。在您的 React 组件中，通过以下方式导入 Javascript 文件：

import myFunction from './path/to/file.js';

// 使用 myFunction

要导入一个命名导出（named export），可以使用以下方法：

import { myFunction } from './path/to/file.js';

// 使用 myFunction

如果要导入多个命名导出，可以使用逗号分隔名称：

import { myFunction, myOtherFunction } from './path/to/file.js';

// 使用 myFunction 和 myOtherFunction

可以使用以下语法一次导入一个模块中的所有导出：

import * as myModule from './path/to/file.js';

// 使用 myModule.myFunction 和 myModule.myOtherFunction

使用 CommonJS Imports

在 React 中，您还可以使用 CommonJS require() 语法来导入模块。与 ES6 Imports 不同的是，使用 CommonJS Imports，您需要把模块导出为 module.exports。在 React 组件中，您可以通过以下方式导入 Javascript 文件：

const myModule = require('./path/to/file.js');

// 使用 myModule

要导入一个命名导出，可以使用以下语法：

const { myFunction } = require('./path/to/file.js');

// 使用 myFunction

导入第三方库

在 React 中，您可以使用 npm、yarn 等工具来管理您的第三方库。使用 ES6 Imports 或 CommonJS Imports，您可以在 React 项目中导入这些库。例如，要在 React 项目中使用 lodash，可以使用以下语法：

import _ from 'lodash';

// 使用 lodash 中的函数，如 _.map()

其中，'lodash' 是您的第三方库名称。 lodash 库中使用的函数前面加上 _，以避免和其他程序中的函数名称冲突。

导入 React 组件

在 React 中，通过 import 和 require() 语法导入其他的 React 组件同样是常见需求。您可以使用相对路径或绝对路径来导入 React 组件。例如，为了在您的 React 组件中引入 Footer 组件，您可以使用以下语法：

import Footer from './Footer';

// 或

const Footer = require('./Footer');

结论

以上是在 React js 中导入 Javascript 的几种方式。在使用这些方式时，请确保您了解项目文件结构、每个模块的导出方式、命名导出的名称等信息。这些信息都有助于您轻松管理和维护您的 React 应用程序。