我想问最后一句的含义和作用(导出默认 HelloWorld;),但我找不到任何有关它的教程。

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

答案

出口喜欢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中,有两种出口:

Named exports - 例如export function func() {}是名称的指定出口func。可以使用import { exportName } from 'module';.在这种情况下,导入的名称应与导出的名称相同。要导入示例中的功能,您必须使用import { func } from 'module';。一个模块中可以有多个命名导出。

Default export - 如果您使用简单导入语句,是从模块导入的值import X from 'module'。X是将本地给出的名称,该名称将分配给包含该值的变量,并且不必像Origin导出那样命名。只能有一个默认导出。

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

来自: stackoverflow.com