为什么es6 react组件只能使用“export default”?

这个组件可以工作:

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

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

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我想，我不理解es6语法中的一些东西。它不是必须导出没有符号“默认”吗?

257246 次浏览
小开
最佳答案

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

class Template {}
class AnotherTemplate {}


export { Template, AnotherTemplate }

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

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

或者，如果你像这样导出default导出，

export default class Template {}

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

import Template from './components/templates'

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

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

import TheTemplate from './components/templates'

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

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

导入导出时添加{}: export { ... }; | import { ... } from './Template'; < / p >

出口 →import { ... } from './Template'

出口违约 →import ... 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扩展名。

您只能导出一个默认组件，并且在导入时可以在不混淆的情况下更改名称(使用作为)。


提交答案