JSX 中的“导出默认值”是做什么的？

小编典典

JSX 中的“导出默认值”是做什么的？

all

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

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

阅读 66

2022-05-22

共1个答案

小编典典

Export
likeexport default HelloWorld;和importimport React from 'react' like是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
是本地分配给包含该值的变量的名称，它不必像原始导出那样命名。只能有一个默认导出。

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

2022-05-22