Menu
×
   ❮     
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 模块依赖于 importexport 语句。


导出

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

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

有两种类型的导出:命名导出和默认导出。


命名导出

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

示例

单独内联

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 美元 注册

默认导出

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

你只能在一个文件中有一个默认导出。

示例

message.js

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

export default message;

导入

你可以通过两种方式将模块导入文件,这取决于它们是命名导出还是默认导出。

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

示例

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

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

亲自尝试 »

示例

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

import message from "./message.js";

亲自尝试 »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.