javascript - Why es6 react component works only with "export default"? - Stack Overflow

admin管理员组

文章数量:1129449

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. Isn't it have to export without sign "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. Isn't it have to export without sign "default"?

• javascript
• ecmascript-6

Share Improve this question Follow edited Aug 7, 2015 at 0:57 Felix Kling 816k180180 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Aug 6, 2015 at 10:09 stkvtflwstkvtflw 13.5k2929 gold badges8888 silver badges173173 bronze badges 3

• 8 you can write as export default class Template extends React.Component { – andykenward Commented Aug 6, 2015 at 10:37
• I know. But how can I import component that was exported without "default"? It should be possible – stkvtflw Commented Aug 6, 2015 at 10:40
• 2 @stkvtflw If I answered your question please accept it so other users can benefit too. – Jed Richards Commented Nov 3, 2015 at 11:38

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 635

Exporting without default means it's a "named export". 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,

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.

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 { ... }; | import { ... } from './Template';

export → import { ... } from './Template'

export default → 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

    // 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.

You can export only one default component and in import can change the name without aliasing it(using as).

本文标签： javascriptWhy es6 react component works only with quotexport defaultquotStack Overflow