Mengapa komponen es6 bereaksi hanya bekerja dengan "standar ekspor"?

241

Komponen ini berfungsi:

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

Jika saya menghapus baris terakhir, itu tidak berfungsi.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Saya kira, saya tidak mengerti sesuatu dalam sintaks ES6. Bukankah harus mengekspor tanpa tanda "default"?

javascript ecmascript-6

— stkvtflw
sumber

Anda dapat menulis sebagai export default class Template extends React.Component {

— andykenward

Aku tahu. Tetapi bagaimana saya bisa mengimpor komponen yang diekspor tanpa "default"? Itu harus dimungkinkan

— stkvtflw

@stkvtflw Jika saya menjawab pertanyaan Anda, mohon setujui agar pengguna lain juga mendapat manfaat.

— Jed Richards

Jawaban:

571

Mengekspor tanpa defaultberarti itu adalah "ekspor bernama". Anda dapat memiliki beberapa ekspor bernama dalam satu file. Jadi jika Anda melakukan ini,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

maka Anda harus mengimpor ekspor ini menggunakan nama persisnya. Jadi untuk menggunakan komponen ini di file lain yang harus Anda lakukan,

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

Atau jika Anda mengekspor sebagai defaultekspor seperti ini,

export default class Template {}

Kemudian di file lain Anda mengimpor ekspor default tanpa menggunakan {}, seperti ini,

import Template from './components/templates'

Hanya ada satu ekspor standar per file. Dalam Bereaksi itu adalah konvensi untuk mengekspor satu komponen dari file, dan untuk mengekspornya adalah sebagai ekspor default.

Anda bebas untuk mengubah nama ekspor default saat Anda mengimpornya,

import TheTemplate from './components/templates'

Dan Anda dapat mengimpor ekspor default dan bernama pada saat yang sama,

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

— Jed Richards
sumber

BAIK. Tapi ini sepertinya keputusan lain yang tampaknya sewenang-wenang yang saya tidak mengerti alasannya tetapi harus menghafalnya. Apakah saya kehilangan beberapa alasan bagus seperti ini? Dalam banyak proyek akan ada puluhan komponen Bereaksi. Memiliki masing-masing file sendiri, tidak peduli seberapa kecil tampaknya, well, agak anal. Khususnya menjadi menyakitkan jika banyak dari mereka berbagi gumpalan fungsi pembantu. Itu membuat lebih banyak baris barang untuk disinkronkan yang tampaknya sedikit kontra-kebaikan. Apa yang saya lewatkan?

Terima kasih. Saya pikir Anda menjawab dengan sempurna menjelaskan hal ini: import React, {Component} from 'react';.

— Qian Chen

Jawaban yang bagus. Saya memiliki sesuatu untuk ditambahkan: Cobalah menggunakan pernyataan impor seperti ini: import RaisedButton from 'material-ui/RaisedButton'; sebagai ganti import {RaisedButton} from 'material-ui'; ini akan membuat proses build Anda lebih cepat dan output build Anda lebih kecil.

— Shekhar Kumar

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

— xgqfrms

@ShekharKumar Apakah Anda punya sumber karena import Binding from 'module/Binding'lebih efisien import {Binding} from 'module'?

— Jeevan Takhar

Tambahkan {} saat mengimpor dan mengekspor: export { ... };| import { ... } from './Template';

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

ekspor default →import ... from './Template'

Berikut ini contoh kerjanya:

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

⚡️Bekerja kotak pasir untuk bermain-main: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Ozalp
sumber