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

iq0todco  于 2022-11-29  发布在  React
关注(0)|答案(7)|浏览(154)

我想问一下最后一句话是什么意思和作用(导出默认HelloWorld;)但我找不到任何有关它的教程。

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;
vlju58qv

vlju58qv1#

Exportexport 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';.导入。在这种情况下,导入的名称应该与导出的名称相同。要导入示例中的函数,您必须使用import { func } from 'module';。一个模块中可以有多个命名导出。
Default export-如果使用简单的import语句import X from 'module',则是从模块中导入的值。X是本地为包含该值的变量指定的名称,它不必像原始导出那样命名。只能有一个默认导出。

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

de90aj5v

de90aj5v2#

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,您可以为其给予任何名称,因为这是默认导出

关于导出的一些信息

顾名思义,它用于从脚本文件或模块中导出函数、对象、类或表达式

  • 实用工具.js*
export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

这可以导入并用作

  • 应用程序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
zpjtge22

zpjtge223#

default export最简单的理解是

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

默认导出:

1.**default export是从文件(模块)中只导出一个对象(变量、函数、类)的约定。
1.
每个文件只能有一个默认导出,但不限于只有一个导出(命名导出)

1.导入默认导出对象时,我们也可以对其进行重命名。

导出或命名导出:

1.用于导出同名对象(变量、函数、类)。
1.它用于从一个文件中导出多个对象。
1.导入到另一个文件时不能重命名,它必须与导出时使用的名称相同,但我们可以使用as运算符创建其别名。
在React、Vue和许多其他框架中,Export主要用于导出可重用组件,以创建基于模块的应用程序。

9avjhtql

9avjhtql4#

简而言之-
export语句用于创建JavaScript模块以从模块中导出函数、对象或基元值,以便其他程序可以通过import语句使用它们。
下面是一个链接,以获得清晰的认识:MDN Web Docs

yeotifhr

yeotifhr5#

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

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

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;

您将收到如下错误:

xe55xuns

xe55xuns6#

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

8ehkhllq

8ehkhllq7#

(My答案可能有点草率。如果有人能改进它,并删除这条评论,我会很感激。)这里有很多很好的答案。那么为什么还要写另一个呢?任何与API有关的东西都有无穷无尽的选项让新手不知所措。实际上,只有少数几个是经常使用的。这是为了涵盖常见的情况。全面的细节可以在这里找到MDN export
大多数情况下,“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

相关问题