Warum funktioniert die es6-Reaktionskomponente nur mit "Standard exportieren"?

241

Diese Komponente funktioniert:

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

Wenn ich die letzte Zeile entferne, funktioniert es nicht.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Ich glaube, ich verstehe etwas in der es6-Syntax nicht. Muss es nicht ohne Vorzeichen "Standard" exportieren?

javascript ecmascript-6

— stkvtflw
quelle

Sie können schreiben als export default class Template extends React.Component {

— andykenward

Ich weiß. Aber wie kann ich eine Komponente importieren, die ohne "Standard" exportiert wurde? Es sollte möglich sein

— stkvtflw

@stkvtflw Wenn ich Ihre Frage beantwortet habe, akzeptieren Sie sie bitte, damit auch andere Benutzer davon profitieren können.

— Jed Richards

Antworten:

571

Exportieren ohne defaultbedeutet, dass es sich um einen "benannten Export" handelt. Sie können mehrere benannte Exporte in einer einzigen Datei haben. Wenn Sie dies tun,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

dann müssen Sie diese Exporte mit ihren genauen Namen importieren. Um diese Komponenten in einer anderen Datei zu verwenden, müssten Sie Folgendes tun:

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

Alternativ, wenn Sie als defaultExport wie folgt exportieren,

export default class Template {}

Dann importieren Sie in einer anderen Datei den Standardexport, ohne Folgendes zu verwenden {}:

import Template from './components/templates'

Es kann nur einen Standardexport pro Datei geben. In React ist es eine Konvention, eine Komponente aus einer Datei zu exportieren und sie als Standardexport zu exportieren.

Sie können den Standardexport beim Importieren umbenennen.

import TheTemplate from './components/templates'

Außerdem können Sie Standard- und benannte Exporte gleichzeitig importieren.

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

— Jed Richards
quelle

OK. Aber dies scheint eine weitere scheinbar willkürliche Entscheidung zu sein, für die ich keine Gründe sehe, die ich mir aber merken muss. Vermisse ich einen guten Grund, warum es so ist? In vielen Projekten wird es Dutzende von React-Komponenten geben. Jeder hat seine eigene Datei, egal wie klein sie auch sein mag, na ja, ein bisschen anal. Es wird besonders schmerzhaft, wenn viele von ihnen Klumpen von Hilfsfunktionen teilen. Es sorgt dafür, dass mehr Zeilen synchron bleiben, was ein bisschen gegen die Güte zu sein scheint. Was vermisse ich?

Danke dir. Ich denke, Sie antworten perfekt erklärt : import React, {Component} from 'react';.

— Qian Chen

Gute Antwort. Ich muss noch etwas hinzufügen: Versuchen Sie, Importanweisungen wie diese zu verwenden: import RaisedButton from 'material-ui/RaisedButton'; Stattdessen import {RaisedButton} from 'material-ui'; wird Ihr Build-Prozess schneller und Ihre Build-Ausgabe kleiner.

— Shekhar Kumar

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— xgqfrms

@ ShekharKumar Haben Sie eine Quelle import Binding from 'module/Binding', um effizienter zu sein als import {Binding} from 'module'?

— Jeevan Takhar

Fügen Sie beim Importieren und Exportieren {} hinzu: export { ... };| import { ... } from './Template';

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

Standard exportieren →import ... from './Template'

Hier ist ein Arbeitsbeispiel:

// 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 />
    </>
  );
}

⚡️Arbeits-Sandbox zum Herumspielen: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Ozalp
quelle