菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

React ES6 模块


模块

JavaScript 模块允许您将代码分解成单独的文件。

这使得维护代码库更加容易。

ES Modules 依赖于 importexport 语句。


导出 (Export)

您可以从任何文件中导出函数或变量。

让我们创建一个名为 person.js 的文件,并填充我们想要导出的内容。

有两种类型的导出:命名导出 (Named) 和默认导出 (Default)。


命名导出 (Named Exports)

您可以通过两种方式创建命名导出。内联单独导出,或在文件底部一次性导出。

示例

内联单独导出

person.js

export const name = "Jesse"
export const age = 40

在底部一次性导出

person.js

const name = "Jesse"
const age = 40

export { name, age }

w3schools CERTIFIED . 2022

获得认证!

完成 React 模块,完成练习,参加考试,并获得 w3schools 认证!

$95 注册

默认导出 (Default Exports)

让我们创建另一个名为 message.js 的文件,并使用它来演示默认导出。

每个文件只能有一个默认导出。

示例

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

导入 (Import)

您可以两种方式将模块导入到文件中,具体取决于它们是命名导出还是默认导出。

命名导出必须使用花括号进行解构。默认导出则不需要。

示例

从文件 person.js 导入命名导出

import { name, age } from "./person.js";

自己动手试一试 »

示例

从文件 message.js 导入默认导出

import message from "./message.js";

自己动手试一试 »


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持