Neden es6 tepki bileşeni yalnızca "varsayılan dışa aktarma" ile çalışır?

241

Bu bileşen çalışır:

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

Son satırı kaldırırsam çalışmaz.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Sanırım, es6 sözdiziminde bir şey anlamıyorum. "Varsayılan" işareti olmadan dışa aktarması gerekmez mi?

javascript ecmascript-6

— stkvtflw
kaynak

sen-ebilmek yazabilir export default class Template extends React.Component {

— andykenward

Biliyorum. Ancak "varsayılan" olmadan dışa aktarılan bileşeni nasıl alabilirim? Mümkün olmalı

— stkvtflw

@stkvtflw Sorunuzu yanıtladıysam lütfen diğer kullanıcıların da yararlanabilmesi için kabul edin.

— Jed Richards

Yanıtlar:

571

Dışa aktarma, default"adlandırılmış dışa aktarma" anlamına gelir. Tek bir dosyada birden çok adlandırılmış dışa aktarma yapabilirsiniz. Yani bunu yaparsanız,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

bu dışa aktarmaları tam adlarını kullanarak içe aktarmanız gerekir. Bu bileşenleri başka bir dosyada kullanmak için yapmanız gereken,

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

Alternatif olarak, defaultbu şekilde dışa aktarma olarak dışa aktarırsanız,

export default class Template {}

Sonra başka bir dosyada, varsayılan dışa aktarmayı {}, bunun gibi kullanmadan içe aktarırsınız ,

import Template from './components/templates'

Dosya başına yalnızca bir varsayılan dışa aktarma olabilir. React'te, bir bileşeni dosyadan dışa aktarma ve dışa aktarma varsayılan dışa aktarma işlemidir.

Varsayılan dışa aktarmayı içe aktarırken yeniden adlandırmakta özgürsünüz,

import TheTemplate from './components/templates'

Varsayılan ve adlandırılmış dışa aktarmaları aynı anda içe aktarabilirsiniz,

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

— Jed Richards
kaynak

TAMAM. Ama bu, mantığı görmediğim ama ezberlemek zorunda olduğum, yine de keyfi görünen başka bir karar gibi görünüyor. Böyle olması için iyi bir neden eksik mi? Birçok projede düzinelerce React bileşeni olacaktır. Her biri kendi dosyasına sahip olmak, ne kadar küçük görünse de, biraz anal. Birçoğu yardımcı işlev kümelerini paylaşıyorsa özellikle acı verir. Senkronize tutmak için biraz daha fazla şey yapar, bu da biraz karşı iyilik gibi görünüyor. Neyi kaçırıyorum?

Teşekkür ederim. Sizi gayet iyi cevap bu açıkladı düşünüyorum: import React, {Component} from 'react';.

— Qian Chen

İyi cevap. Eklemek için bir şey var: import RaisedButton from 'material-ui/RaisedButton'; Bunun gibi ithalat ifadeleri kullanmaya çalışın: Bunun yerine import {RaisedButton} from 'material-ui'; Bu, oluşturma işleminizi daha hızlı ve yapı çıktısını daha küçük hale getirecektir.

— Shekhar Kumar

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

— xgqfrms

@ShekharKumar import Binding from 'module/Binding'Daha verimli olmak için bir kaynağınız var import {Binding} from 'module'mı?

— Jeevan Takhar

İçe ve dışa aktarırken {} ekleyin: export { ... };| import { ... } from './Template';

dışa aktar →import { ... } from './Template'

varsayılanı dışa aktar →import ... from './Template'

İşte çalışan bir örnek:

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

⚡️Çalışmak için çalışma sanal alanı: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Özalp
kaynak