JSX 中的“导出默认值”有啥作用？

Posted 2023-02-21

【中文标题】JSX 中的“导出默认值”有啥作用？

【英文标题】：What does "export default" do in JSX?JSX 中的“导出默认值”有什么作用？

【发布时间】：2016-07-25 09:41:05

【问题描述】：

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

// hello-world.jsx

import React from 'react';

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


export default HelloWorld;

【问题讨论】：

这能回答你的问题吗？ What is "export default" in javascript?

【参考方案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'; 一起导入。

【参考方案2】：

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

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

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

并用作 App.js

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

【参考方案3】：

对default export 的最简单理解是

Export 是 ES6 的特性，用于导出模块（文件）并在其他模块（文件）中使用。

默认导出：

如果您只想从文件（模块）中导出一个对象（变量、函数、类），则 default export 是惯例。 每个文件只能有一个默认导出，但不限于只有一个导出（命名导出）。 导入默认导出对象时，我们也可以重命名它。

导出或命名导出：

用于导出同名对象（变量、函数、类）。

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

在其他文件中导入时不能重命名，必须与导出时使用相同的名称，但我们可以使用as运算符创建它的别名。

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

【参考方案4】：

简单来说-

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

这里有一个链接可以清楚地理解：MDN Web Docs

【参考方案5】：

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

【参考方案6】：

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

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

  import react from 'react'

function Header()

    return <p><b><h1>This is the Heading section</h1></b></p>;

**export default Header;**

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

从'./Header'导入标题；

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

你会得到这样的错误：-

【讨论】：

Please do not use images as replacement for code blocks or error messages. 你的答案很容易写出来，不用任何图像。代码可以放在代码块中，错误信息可以放在块引用中。