[英]Why es6 react component works only with "export default"?
This component does work:这个组件确实有效:
export class Template extends React.Component {
render() {
return (
<div> component </div>
);
}
};
export default Template;
If i remove last row, it doesn't work.如果我删除最后一行,则不起作用。
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
I guess, I don't understand something in es6 syntax.我想,我不明白 es6 语法中的某些东西。 Isn't it have to export without sign "default"?不是必须在没有符号“默认”的情况下导出吗?
Exporting without default
means it's a "named export".无default
导出意味着它是一个“命名导出”。 You can have multiple named exports in a single file.您可以在一个文件中拥有多个命名导出。 So if you do this,所以如果你这样做,
class Template {}
class AnotherTemplate {}
export { Template, AnotherTemplate }
then you have to import these exports using their exact names.那么您必须使用它们的确切名称导入这些导出。 So to use these components in another file you'd have to do,所以要在另一个文件中使用这些组件,你必须这样做,
import {Template, AnotherTemplate} from './components/templates'
Alternatively if you export as the default
export like this,或者,如果您像这样导出为default
导出,
export default class Template {}
Then in another file you import the default export without using the {}
, like this,然后在另一个文件中导入默认导出而不使用{}
,像这样,
import Template from './components/templates'
There can only be one default export per file.每个文件只能有一个默认导出。 In React it's a convention to export one component from a file, and to export it is as the default export.在 React 中,从文件中导出一个组件是一种约定,并将其导出为默认导出。
You're free to rename the default export as you import it,您可以在导入时自由重命名默认导出,
import TheTemplate from './components/templates'
And you can import default and named exports at the same time,您可以同时导入默认导出和命名导出,
import Template,{AnotherTemplate} from './components/templates'
Add { } while importing and exporting: export { ... };
导入导出时添加{}: export { ... };
| | import { ... } from './Template';
export → import { ... } from './Template'
导出→ import { ... } from './Template'
export default → import ... from './Template'
导出默认值→ import ... from './Template'
Here is a working example:这是一个工作示例:
// 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 />
</>
);
}
⚡️Working sandbox to play around: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark ⚡️工作沙箱: 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
EXPORTING OBJECT:出口对象:
class EmployeeService { }
export default new EmployeeService()
import EmployeeService from "../services/EmployeeService"; // default import
EXPORTING ARRAY导出数组
export const arrExport = [
['first', 'First'],
['second', 'Second'],
['third', 'Third'],
]
import {arrExport} from './Message' //named import
// if not react and javascript app then mention .js extension in the import statement. // 如果没有反应和 javascript 应用程序,则在导入语句中提及 .js 扩展名。
You can export only one default component and in import can change the name without aliasing it(using as ).您只能导出一个默认组件,并且在导入时可以更改名称而无需为其添加别名(使用as )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.