什么是“出口违约”?在JSX做什么?

我想问最后一句话是什么意思和做(导出默认HelloWorld;)，但我找不到任何教程。

// hello-world.jsx


import React from 'react';


class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}


export default HelloWorld;
275202 次浏览
小开
最佳答案

出口如export default HelloWorld;和进口，如import React from 'react'是ES6模块系统的一部分。

模块是一个自包含单元，它可以使用export向其他模块公开资产，并使用import从其他模块获取资产。

在你的代码中:

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中有两种类型的导出:

叫出口——例如，export function func() {}是一个名为func的命名导出。命名模块可以使用import { exportName } from 'module';.导入。在这种情况下，导入的名称应该与导出的名称相同。要在示例中导入func，必须使用import { func } from 'module';。一个模块中可以有多个命名导出。

默认的出口 -如果使用简单的导入语句import X from 'module'，则该值将从模块导入。X是将在本地赋给包含该值的变量的名称，它不需要像origin export那样命名。只能有一个默认导出。

一个模块可以同时包含命名导出和默认导出，并且可以使用import defaultExport, { namedExport1, namedExport3, etc... } from 'module';将它们一起导入。

小开

〇简单地说

export语句用于创建JavaScript模块to 从模块so导出函数、对象或原语值 它们可以通过import语句被其他程序使用

下面是一个链接，以获得清晰的理解:MDN Web文档

小开

对default export最简单的理解是

Export是ES6的特性，用于导出一个模块(文件)并在其他模块(文件)中使用它。

默认导出:

  1. 如果你只想从文件(模块)中导出一个对象(变量、函数、类)，则使用default export。
  2. 每个文件只能有一个默认导出，但不限于一个导出(命名导出)。
  3. 当导入默认导出对象时，我们也可以重命名它。

导出或命名导出:

  1. 用于导出同名的对象(变量、函数、类)。

  2. 用于从一个文件中导出多个对象。

  3. 在另一个文件中导入时不能重命名，它必须具有与导出时相同的名称，但我们可以使用as操作符创建它的别名。

在React, Vue和许多其他框架中，Export主要用于导出可重用的组件，以创建基于模块化的应用程序。

小开

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

或

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

当使用export default时，这要简单得多。脚本文件只导出一件东西。 cube.js < / em >

export default function cube(x) {
return x * x * x;
};

和用作 App.js < / em >

import Cube from 'cube';
console.log(Cube(3)); // 27
小开

简单地说，导出意味着让我们编写的脚本被另一个脚本使用。如果我们说导出，我们的意思是任何模块都可以通过导入这个脚本来使用它。

小开
    在学习默认导出之前，让我们先了解什么是导出和导入: 一般来说:导出是可以发送给其他人的商品和服务，类似地，函数组件中的导出意味着你让另一个脚本使用你的函数或组件
  • 导出默认值意味着您只想导出脚本中默认存在的一个值，以便其他脚本可以导入该值以供使用。
  • 这对于代码的可重用性是非常必要的。

让我们看看如何使用它的代码

import react from 'react'


function Header() {
return <p><b><h1>This is the Heading section</h1></b></p>;
}


export default Header;
  • 因为这个导出可以像这样导入

    import React from 'react';
import reactDom from 'react-dom';
import Header from './Header';


reactDom.render(
<>
<Header />
</>, document.getElementById('root')
)

  • 如果有人注释了export部分，你会得到以下错误:

    import react from 'react'


function Header() {
return <p><b><h1>This is the Heading section</h1></b></p>;
}


// export default Header;

你会得到这样一个错误:

Error without export .

小开

(我的回答可能有点草率。如果有人能改进它并删掉这条评论，我会很感激的。)这里有很多好答案。那么为什么要再写一篇呢?任何与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

提交答案