Perché il componente di reazione es6 funziona solo con "export default"?

241

Questo componente funziona:

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

Se rimuovo l'ultima riga, non funziona.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Immagino, non capisco qualcosa nella sintassi es6. Non è necessario esportare senza segno "predefinito"?

javascript ecmascript-6

— stkvtflw
fonte

puoi scrivere come export default class Template extends React.Component {

— andykenward il

Lo so. Ma come posso importare un componente che è stato esportato senza "default"? Dovrebbe essere possibile

— stkvtflw

@stkvtflw Se ho risposto alla tua domanda, accettala in modo che anche altri utenti possano trarne vantaggio.

— Jed Richards,

Risposte:

571

L'esportazione senza defaultmezzi è una "esportazione denominata". Puoi avere più esportazioni denominate in un singolo file. Quindi se lo fai,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

quindi devi importare queste esportazioni usando i loro nomi esatti. Quindi per usare questi componenti in un altro file dovresti fare,

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

In alternativa, se esporti come defaultesportazione in questo modo,

export default class Template {}

Quindi in un altro file si importa l'esportazione predefinita senza utilizzare {}, in questo modo,

import Template from './components/templates'

Può esserci solo un'esportazione predefinita per file. In React è una convenzione esportare un componente da un file ed esportarlo è come esportazione predefinita.

Sei libero di rinominare l'esportazione predefinita mentre la importi,

import TheTemplate from './components/templates'

E puoi importare esportazioni predefinite e denominate allo stesso tempo,

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

— Jed Richards
fonte

OK. Ma questa sembra un'ennesima decisione apparentemente arbitraria per la quale non vedo la logica ma che devo memorizzare. Mi sto perdendo qualche buona ragione per cui è così? In molti progetti ci saranno dozzine di componenti di React. Avere ognuno il proprio file, non importa quanto piccolo sembri, beh, un po 'anale. Diventa particolarmente doloroso se molti di loro condividono gruppi di funzioni di aiuto. Fa sì che più linee di cose rimangano sincronizzate, il che sembra un po 'contrario. Cosa mi sto perdendo?

Grazie. Credo che si risponde perfettamente spiegato in questo modo: import React, {Component} from 'react';.

— Qian Chen,

Buona risposta. Ho qualcosa da aggiungere ad esso: prova a usare dichiarazioni di importazione come questa: import RaisedButton from 'material-ui/RaisedButton'; invece di import {RaisedButton} from 'material-ui'; Ciò renderà il tuo processo di compilazione più veloce e il tuo output sarà più piccolo.

— Shekhar Kumar,

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

— xgqfrms

@ShekharKumar Hai una fonte per import Binding from 'module/Binding'essere più efficiente di import {Binding} from 'module'?

— Jeevan Takhar,

Aggiungi {} durante l'importazione e l'esportazione: export { ... };| import { ... } from './Template';

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

esportazione predefinita →import ... from './Template'

Ecco un esempio funzionante:

// 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 funzionante per giocare: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Ozalp
fonte