此组件可以正常工作:
export class Template extends React.Component {
render() {
return (
<div> component </div>
);
}
};
export default Template;
如果我删除最后一行,它就不起作用。
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
我想,我不会理解es6语法中的某些内容。它不必出口没有标志&#34;默认&#34;?
答案 0 :(得分:515)
不使用default
导出意味着它已成为&#34;命名导出&#34;。您可以在单个文件中具有多个命名导出。所以,如果你这样做,
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'
您可以同时导入默认导出和命名导出,
import Template,{AnotherTemplate} from './components/templates'
答案 1 :(得分:6)
在导入和导出时添加{}:
export { ... };
|
import { ... } from './Template';
导出→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