我想问最后一句话是什么意思和做(导出默认HelloWorld;),但我找不到任何教程。
// hello-world.jsx
import React from 'react';
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld;
我想问最后一句话是什么意思和做(导出默认HelloWorld;),但我找不到任何教程。
// hello-world.jsx
import React from 'react';
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld;
当前回答
导出默认的HelloWorld;和import,例如import React from ' React '是ES6模块系统的一部分。
模块是一个自包含的单元,它可以使用导出向其他模块公开资产,并使用导入从其他模块获取资产。
在你的代码中:
import React from 'react'; // get the React object from the react module
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld; // expose the HelloWorld component to other modules
在ES6中有两种类型的导出:
命名导出-例如,导出函数func(){}是一个命名导出,其名称为func。可以使用import {exportName}从'module';导入命名模块。在这种情况下,导入的名称应该与导出的名称相同。要在示例中导入func,你必须使用import {func} from 'module';。一个模块中可以有多个命名导出。
默认export -是将从模块导入的值,如果你使用简单的import语句import X from 'module'。X是将在本地赋给包含该值的变量的名称,它不需要像origin export那样命名。只能有一个默认导出。
一个模块可以同时包含命名导出和默认导出,并且可以使用import defaultExport、{namedExport1、namedExport3等方法将它们一起导入……} from 'module';。
其他回答
(我的回答可能有点草率。如果有人能改进它并删掉这条评论,我会很感激的。)这里有很多好答案。那么为什么要再写一篇呢?任何与API有关的东西都让新手们不知所措,有无尽的选择。实际上,只有少数几个是经常使用的。这是针对一般情况的。全面的细节可以在这里找到MDN导出。
大多数情况下,'export default'的使用就像它在问题中一样。注意,每个文件只能有一个导出默认值[export default HelloWorld] 这使得HelloWorld()在其他使用命令导入它的文件中可见
import HelloWorld from 'hello-world';
HelloWorld() // prints [Hello, world!] in the browser
我见过一个让新手感到困惑的变化——因为只能有一个导出默认值,我们可以在导入文件中任意调用它。所以下面的代码也是正确的:
import abracadabra from 'hello-world';
abracadabra() // prints [Hello, world!] in the browser
Export default用于从脚本文件中导出单个类、函数或原语。
导出还可以写成
export default class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
你也可以把它写成函数分量
export default function HelloWorld() {
return <p>Hello, world!</p>
}
用于在另一个脚本文件中导入此函数
import HelloWorld from './HelloWorld';
你不一定要把它导入HelloWorld,你可以给它任何名字,因为它是一个默认的导出
稍微讲一下出口
顾名思义,它用于从脚本文件或模块中导出函数、对象、类或表达式
Utiliites.js
export function cube(x) {
return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;
这可以导入并作为
App.js
import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Or
import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo); // 4.555806215962888
当使用export default时,这要简单得多。脚本文件只导出一件东西。 cube.js
export default function cube(x) {
return x * x * x;
};
并用作 App.js
import Cube from 'cube';
console.log(Cube(3)); // 27
导出默认的HelloWorld;和import,例如import React from ' React '是ES6模块系统的一部分。
模块是一个自包含的单元,它可以使用导出向其他模块公开资产,并使用导入从其他模块获取资产。
在你的代码中:
import React from 'react'; // get the React object from the react module
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
export default HelloWorld; // expose the HelloWorld component to other modules
在ES6中有两种类型的导出:
命名导出-例如,导出函数func(){}是一个命名导出,其名称为func。可以使用import {exportName}从'module';导入命名模块。在这种情况下,导入的名称应该与导出的名称相同。要在示例中导入func,你必须使用import {func} from 'module';。一个模块中可以有多个命名导出。
默认export -是将从模块导入的值,如果你使用简单的import语句import X from 'module'。X是将在本地赋给包含该值的变量的名称,它不需要像origin export那样命名。只能有一个默认导出。
一个模块可以同时包含命名导出和默认导出,并且可以使用import defaultExport、{namedExport1、namedExport3等方法将它们一起导入……} from 'module';。
〇简单地说
export语句用于创建JavaScript模块 从模块导出函数、对象或基元值 其他程序可以通过import语句使用它们。
这里有一个链接可以让你更清楚地了解:MDN Web Docs
简单地说,导出意味着让我们编写的脚本被另一个脚本使用。如果我们说导出,我们的意思是任何模块都可以通过导入这个脚本来使用它。