web-dev-qa-db-fra.com

Comment importer et exporter des composants à l'aide de React + ES6 + webpack?

Je joue avec React et ES6 en utilisant babel et webpack. Je souhaite créer plusieurs composants dans différents fichiers, les importer dans un seul fichier et les associer à webpack

Disons que j'ai quelques composants comme celui-ci:

my-navbar.jsx

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

main-page.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import MyNavbar from './comp/my-navbar.jsx';

export class MyPage extends React.Component{
  render(){
    return(
        <MyNavbar />
        ...
    );
  }
}

ReactDOM.render(
  <MyPage />,
  document.getElementById('container')
);

En utilisant webpack et en suivant leur tutoriel, j’ai main.js:

import MyPage from './main-page.jsx';

Après avoir construit et exécuté le projet, le message d'erreur suivant s'affiche dans la console de mon navigateur:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

Qu'est-ce que je fais mal? Comment puis-je importer et exporter correctement mes composants?

reactjsecmascript-6webpack
118
itaied

Essayez par défaut ing les exportations dans vos composants:

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

en utilisant default, vous indiquez que ce membre va être importé si aucun nom de membre spécifique n'est fourni. Vous pouvez également indiquer que vous souhaitez importer le membre spécifique appelé MyNavbar en procédant ainsi: import {MyNavbar} à partir de './comp/my-navbar.jsx'; dans ce cas, aucune valeur par défaut n'est requise

115
Emilio Rodriguez

Envelopper des composants avec des accolades si aucune exportation par défaut:

import {MyNavbar} from './comp/my-navbar.jsx';

ou importer plusieurs composants à partir d'un fichier de module unique

import {MyNavbar1, MyNavbar2} from './module';
93
nof

Pour exporter un seul composant dans ES6, vous pouvez utiliser export default comme suit:

class MyClass extends Component {
 ...
}

export default MyClass;

Et maintenant, vous utilisez la syntaxe suivante pour importer ce module:

import MyClass from './MyClass.react'

Si vous souhaitez exporter plusieurs composants à partir d'un seul fichier, la déclaration ressemblera à ceci:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Et maintenant, vous pouvez utiliser la syntaxe suivante pour importer ces fichiers:

import {MyClass1, MyClass2} from './MyClass.react'
88
josephmisiti

MDN a vraiment une bonne documentation pour toutes les nouvelles façons d'importer et d'exporter des modules: ES 6 Import-MDN . En décrivant brièvement votre question, vous auriez pu soit:

  1. A déclaré le composant que vous exportiez en tant que composant 'par défaut' que ce module était en train d'exporter: export default class MyNavbar extends React.Component {, et lors de l'importation de votre 'MyNavbar', vous n'avez PAS besoin de mettre des accolades autour: import MyNavbar from './comp/my-navbar.jsx';. Ne pas mettre d'accolades autour d'une importation indique cependant au document que ce composant a été déclaré comme "export par défaut". Si ce n'était pas le cas, vous obtiendrez une erreur (comme vous l'avez fait).

  2. Si vous ne voulez pas déclarer votre 'MyNavbar' comme exportation par défaut lors de son exportation: export class MyNavbar extends React.Component {, vous devrez alors envelopper votre importation de 'MyNavbar entre accolades: import {MyNavbar} from './comp/my-navbar.jsx';

Je pense que puisque vous n'avez qu'un seul composant dans votre fichier './comp/my-navbar.jsx', il est préférable d'en faire l'exportation par défaut. Si vous aviez plus de composants comme MyNavbar1, MyNavbar2, MyNavbar3, alors je ne voudrais pas leur attribuer une valeur par défaut et importer des composants sélectionnés d'un module lorsque ce dernier n'a pas déclaré quoi que ce soit par défaut: import {foo, bar} from "my-module"; où foo et bar sont plusieurs membres de votre module.

Lisez certainement le document MDN car il contient de bons exemples de syntaxe. J'espère que cela aidera avec un peu plus d'explication à quiconque voudrait jouer avec ES 6 et importer/exporter des composants dans React.

9
Carol Gonzalez

J'espère que c'est utile

Étape 1: App.js est (module principal) importer le module de connexion

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

Étape 2: Créez un dossier de connexion, créez un fichier login.js et personnalisez vos besoins, puis le restituera automatiquement à App.js. Exemple Login.js

import React, { Component } from 'react';
import '../login/login.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;
3
Vidhyapathi Kandhasamy

Il y a deux manières différentes d'importer des composants dans reag et la manière recommandée est celle des composants.

  1. Manière de la bibliothèque (non recommandé)
  2. Manière de composant (recommandé)

Explication détaillée du PFB

Mode d'importation de la bibliothèque

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

C'est pratique et pratique, mais cela ne regroupe pas seulement Button et FlatButton (et leurs dépendances), mais également l'ensemble des bibliothèques.

Manière d'importer par composant

Une façon de le réduire est d'essayer d'importer ou d'exiger ce qui est nécessaire, disons le composant. En utilisant le même exemple:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

Cela regroupera uniquement Button, FlatButton et leurs dépendances respectives. Mais pas toute la bibliothèque. J'essaierais donc de supprimer toutes vos importations de bibliothèque et d'utiliser plutôt la méthode des composants.

Si vous n'utilisez pas beaucoup de composants, la taille de votre fichier fourni devrait être considérablement réduite.

1
Hemadri Dasari