Question

我想问一下最后一句话的意思和作用（导出默认的HelloWorld;）但我找不到任何关于它的教程。

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Answer 1

Export例如export default HelloWorld;和import，例如import React from 'react'是ES6 modules system的一部分。

模块是一个自包含的单元，可以使用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是将在本地赋予包含该值的变量的名称，并且它不必像原始导出一样命名。只能有一个默认导出。

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

Answer 2

简单的话 -

在创建JavaScript模块时使用export语句从模块中导出函数，对象或原始值 其他程序可以使用import语句来使用它们。

以下是获得清晰理解的链接：MDN Web Docs

Answer 3

对default export的最简单的理解是

Export是ES6的功能，用于导出一个模块并在另一个模块中使用。

默认导出：

default export 是一种约定。
每个文件只能有一个默认导出。
导入默认导出的对象时，我们也可以对其重命名。

导出或命名导出：

用于导出具有相同名称的对象（变量，函数）。
它可以从一个文件导出多个对象。
在导入另一个文件时不能重命名，它必须具有用于导出文件的相同名称。

Answer 4

export default用于从脚本文件中导出单个类，函数或基元。

导出也可以写为

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

您也可以将其编写为

之类的功能组件。

export default const HelloWorld = () => (<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

使用导出默认值时，这要简单得多。脚本文件仅导出一件事。 cube.js

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

并用作 App.js

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

Answer 5

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

Answer 6

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

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

  import react from 'react'

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

因为这个导出，它可以像这样导入-

从'./Header'导入标题；

如果有人评论导出部分，您将收到以下错误：

你会得到这样的错误：-

“导出默认值”在JSX中有什么作用？

6 个答案:

有关出口的一些信息