为什么es6 react组件只能与“导出默认值”一起工作？

Question

该组件在以下情况下工作：

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

如果我删除最后一行，它将不起作用。

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我想，我不明白es6语法中的一些东西。不是必须导出不带标志的“默认”吗？

Answer 1

    // 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）。

Answer 2

导入和导出时添加{}：导出{...}；|导入{...}from'。/Template'；

出口→ <代码>从“./Template”导入{…}

导出默认值→ <代码>导入。。。来自“./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

Answer 3

在没有默认值的情况下导出表示它是“命名导出”。在一个文件中可以有多个命名导出。所以如果你这样做，

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'

您可以同时导入默认和命名导出，

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