“出口默认”是什么在JSX做什么？ [英] What does "export default" do in JSX?

问题描述

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

I want to ask what the last sentence means and does (export default HelloWorld;) but I can't find any tutorials about it.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

推荐答案

导出，如导出默认HelloWorld; 和 import ，例如 import React from 'react'是 ES6模块系统的一部分。

模块是一个独立的单元，可以使用 export 将资产暴露给其他模块，并使用 import 从其他模块中获取资产。

A module is a self contained unit that can expose assets to other modules using export, and acquire assets from other modules using 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中有两种导出：

In ES6 there are two kinds of exports:

命名导出 - 例如导出函数func（）{} 是一个命名导出名称 func 。可以使用 import {exportName}导入命名模块;。在这种情况下，导入的名称应与导出的名称相同。要在示例中导入func，您必须使用 import {func}; 。在一个模块中可以有多个命名导出。

Named exports - for example export function func() {} is a named export with the name of func. Named modules can be imported using import { exportName } from 'module';. In this case, the name of the import should be the same as the name of the export. To import the func in the example, you'll have to use import { func } from 'module';. There can be multiple named exports in one module.

默认导出 - 是从模块导入的值，如果使用简单导入语句从'module'导入X. X是将在本地赋予包含该值的变量的名称，并且不必像原始导出那样命名。只能有一个默认导出。

Default export - is the value that will be imported from the module, if you use the simple import statement import X from 'module'. X is the name that will be given locally to the variable assigned to contain the value, and it doesn't have to be named like the origin export. There can be only one default export.

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

A module can contain both named exports and a default export, and they can be imported together using import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

这篇关于“出口默认”是什么在JSX做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！