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

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 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';。一个模块中可以有多个命名的导出。

默认export- 是使用简单import语句将从模块中导入的值import X from 'module'。X是将在本地分配给分配为包含值的变量的名称，而不必像原始输出那样命名。默认只能有一个导出。

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