为什么es6反应组件仅适用于"导出默认值"?

时间:2015-08-06 10:09:08

标签: javascript ecmascript-6

此组件可以正常工作:

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;?

2 个答案:

答案 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