web-dev-qa-db-fra.com

Pourquoi mon React Component Export ne fonctionne pas?

Je commençais juste à réagir et à l'essayer par moi-même. Après des heures de configuration de webpack juste pour avoir un bonjour sur mon écran, j'ai pensé que je pouvais y aller maintenant, mais après avoir essayé de rendre un autre composant à partir d'un fichier, le problème suivant.

Mon fichier principal est app.js, qui rend tout:

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

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

Le composant Hello vient de mon hello.js dans le même dossier:

import React from 'react';

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

export default Hello;

Ça allait bien quand je faisais tout juste dans app.js sans l'importation/exportation. Il compile également très bien. Mais il y a maintenant beaucoup d'erreurs dans la console. Alors qu'est-ce qui me manque?

Merci

Gerd

javascriptreactjswebpackwebpack-dev-server
8
gerdtf

Étant donné que votre exportation est default, vous n'avez pas besoin d'accolades autour du nom de votre composant d'importation:

import Hello from './hello';

Voici un article technique détaillé d'Axel Rauschmayer sur la syntaxe finale des modules ES6 que vous pourriez trouver utile.

Et voici un article un peu moins technique sur le même sujet.

29
Andy

lorsque vous importez la classe par défaut que vous utilisez

import ClassName from 'something';

et lorsque vous importez d'autres classes que vous utilisez

import {ClassName} from 'something';

un exemple:

dans le fichier hello.js

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;

dans un autre fichier

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

astuce: vous pouvez également importer la classe par défaut avec un autre nom

import Component, {Other} from './hello';
6
mina sameh