没有默认值的导出意味着它是一个“命名导出”。单个文件中可以有多个命名导出。如果你这么做，

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

然后，您必须使用它们的确切名称导入这些导出。所以要在另一个文件中使用这些组件，

import {Template, AnotherTemplate} from './components/templates'

或者，如果你像这样默认导出，

export default class Template {}

然后在另一个文件中导入默认的导出，不使用{}，就像这样，

import Template from './components/templates'

每个文件只能有一个默认导出。在React中，从一个文件中导出一个组件是一种惯例，导出它是默认的导出。

您可以在导入默认导出时重命名它，

import TheTemplate from './components/templates'

你可以同时导入default和named导出，

import Template,{AnotherTemplate} from './components/templates'

导入导出时添加{}: 输出{…};| 导入{…} from './Template';

出口→进口{…} from './Template'

导出默认→导入…从“/模板。”

下面是一个工作示例:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

⚡️工作沙盒玩玩:https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

    // imports
    // ex. importing a single named export
    import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
    import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
    import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
    export const MyComponent = () => {}
    export const MyComponent2 = () => {}
    
    import * as MainComponents from "./MyComponent";
    // use MainComponents.MyComponent and MainComponents.MyComponent2
    //here

出口对象:

class EmployeeService { }
export default new EmployeeService()

import EmployeeService from "../services/EmployeeService"; // default import

输出数组

 export const arrExport = [
        ['first', 'First'],
        ['second', 'Second'],
        ['third', 'Third'],
      ]
    
    import {arrExport} from './Message' //named import

//如果没有react和javascript应用程序，那么在import语句中提到.js扩展名。

您只能导出一个默认组件，并且在导入时可以更改名称而不使其别名(使用as)。