Pourquoi le composant es6 react fonctionne uniquement avec «export par défaut»?

241

Ce composant fonctionne:

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

Si je supprime la dernière ligne, cela ne fonctionne pas.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Je suppose que je ne comprends pas quelque chose dans la syntaxe es6. N'est-il pas nécessaire d'exporter sans signe "par défaut"?

javascript ecmascript-6

— stkvtflw
source

vous pouvez écrire comme export default class Template extends React.Component {

— andykenward

Je connais. Mais comment puis-je importer un composant qui a été exporté sans "défaut"? Cela devrait être possible

— stkvtflw

@stkvtflw Si j'ai répondu à votre question, veuillez l'accepter afin que les autres utilisateurs puissent en bénéficier également.

— Jed Richards

Réponses:

571

Exporter sans defaultsignifie que c'est une "exportation nommée". Vous pouvez avoir plusieurs exportations nommées dans un seul fichier. Donc, si vous faites cela,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

alors vous devez importer ces exportations en utilisant leurs noms exacts. Donc, pour utiliser ces composants dans un autre fichier, vous devez le faire,

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

Alternativement, si vous exportez en tant defaultqu'export comme celui-ci,

export default class Template {}

Ensuite, dans un autre fichier, vous importez l'exportation par défaut sans utiliser {}, comme ceci,

import Template from './components/templates'

Il ne peut y avoir qu'une seule exportation par défaut par fichier. Dans React, c'est une convention d'exporter un composant à partir d'un fichier et de l'exporter comme exportation par défaut.

Vous êtes libre de renommer l'exportation par défaut lors de son importation,

import TheTemplate from './components/templates'

Et vous pouvez importer des exportations par défaut et nommées en même temps,

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

— Jed Richards
source

D'ACCORD. Mais cela semble être une autre décision apparemment arbitraire dont je ne vois pas la justification mais que je dois mémoriser. Est-ce que je manque une bonne raison pour laquelle c'est comme ça? Dans de nombreux projets, il y aura des dizaines de composants React. Avoir chacun son propre fichier, aussi petit soit-il, eh bien, un peu anal. Cela devient particulièrement douloureux si beaucoup d'entre eux partagent des blocs de fonctions d'assistance. Cela fait que plus de lignes de choses restent synchronisées, ce qui semble un peu contre-bon. Qu'est-ce que je rate?

Je vous remercie. : Je pense que ce que vous répondez parfaitement expliqué import React, {Component} from 'react';.

— Qian Chen

Bonne réponse. J'ai quelque chose à ajouter: essayez d'utiliser des déclarations d'importation comme ceci: import RaisedButton from 'material-ui/RaisedButton'; au lieu de import {RaisedButton} from 'material-ui'; Cela rendra votre processus de génération plus rapide et votre sortie de génération plus petite.

— Shekhar Kumar

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

— xgqfrms

@ShekharKumar Avez-vous une source pour import Binding from 'module/Binding'être plus efficace que import {Binding} from 'module'?

— Jeevan Takhar

Ajoutez {} lors de l'importation et de l'exportation: export { ... };| import { ... } from './Template';

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

exporter par défaut →import ... from './Template'

Voici un exemple de travail:

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

⚡️ Sandbox de travail pour jouer: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Ozalp
source