Warum funktioniert meine Reagieren Komponente Export nicht funktioniert?

War ich nur immer zu reagieren und zu versuchen, es aus für mich. Nach Stunden der Konfiguration webpack, nur um ein hello world auf meinem Bildschirm dachte ich, ich könnte jetzt gehen, aber nach dem Rendern eine andere Komponente aus einer Datei das nächste problem.

Meine main-Datei ist app.js rendert alles:

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Hallo die Komponente stammt aus meinem hello.js im gleichen Ordner:

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

War es rendering in Ordnung, wenn ich mache alles nur in app.js ohne die import/export. Es kompiliert auch in Ordnung. Aber es gibt eine Menge von Fehlern, die jetzt in der Konsole. So was vermisse ich?

Dank

Gerd

  • Ihre Hallo-Komponente ist mit export default so dass Sie wollen entfernen Sie die Klammern import Hello from './hello';
InformationsquelleAutor gerdtf | 2017-12-03
  1. 28

    Weil Ihr export ist default Sie brauchen keine Klammern um Ihre import-Komponente name:

    import Hello from './hello';

    Hier ist eine ausführliche technische Artikel von Axel Rauschmayer auf der letzten ES6-Module-syntax, die Sie vielleicht nützlich finden.

    Und hier ist ein etwas weniger techy post über das gleiche Thema.

    • vielen Dank für die nicht nur ein rookie und läuft, aber auch was ihn zu verstehen, was der tatsächliche Unterschied ist.
    InformationsquelleAutor Andy
  2. 6

    beim importieren der Standard-Klasse, die Sie verwenden 

    import ClassName from 'something';

    und wenn Sie den import anderer Klassen, die Sie verwenden

    import {ClassName} from 'something';

    Beispiel:

    in hello.js Datei

    import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

class Other extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}
export default Hello;
export Other;

    in andere Datei

    import Hello, {Other} from './hello';

    Tipp: Sie können auch importieren Sie die Standard-Klasse mit anderen Namen

    import Component, {Other} from './hello';
    • Dies ist ein hervorragendes Beispiel, aber die Anderen Komponenten müssen auch eigene export-Anweisung.
    • ja du hast Recht, einfach ein copy/paste Problem :"D
    InformationsquelleAutor mina sameh
Schreibe einen Kommentar