Comment importer et exporter des composants à l'aide de Réagir + ES6 + webpack?
Je suis en train de jouer autour avec React
et ES6
à l'aide de babel
et webpack
. Je veux construire plusieurs composants dans les différents fichiers, importer dans un fichier unique et bundle avec webpack
Disons que j'ai un peu de composants comme ceci:
ma-barre de navigation.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>
);
}
}
principal-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')
);
À l'aide de webpack et à la suite de leur tutoriel, j'ai main.js
:
import MyPage from './main-page.jsx';
Après la construction du projet et à son exécution, j'obtiens l'erreur suivante dans mon navigateur de la console:
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`.
Ce que je fais mal? Comment puis-je correctement l'importation et l'exportation de mes composants?
export
mot clé de détails ici. Il n'est actuellement pas pris en charge nativement par tout les navigateurs web.
Vous devez vous connecter pour publier un commentaire.
Essayer par défauting les exportations dans vos composants:
en utilisant par défaut de vous exprimer qui va être membre de ce module qui serait importé si aucun membre nom est fourni. Vous pouvez également exprimer que vous voulez importer le membre spécifique appelé MyNavbar par le faire: importer {MyNavbar} de". /comp/mon-barre de navigation.jsx"; dans ce cas, aucune valeur par défaut n'est nécessaire
Emballage des composants avec des accolades si aucune valeur par défaut n'exportations:
ou importer plusieurs composants de module unique fichier
named exports
dans l'es6 et un moyen plus sûr pour l'exportation developer.mozilla.org/en/docs/web/javascript/reference/... de l'aidedefault
À l'exportation d'un seul élément dans l'ES6, vous pouvez utiliser
export default
comme suit:Et maintenant, vous utilisez la syntaxe suivante pour importer ce module:
Si vous êtes à la recherche d'exporter plusieurs composants à partir d'un seul fichier de la déclaration ressemblerait à quelque chose comme ceci:
Et maintenant, vous pouvez utiliser la syntaxe suivante pour importer ces fichiers:
MDN a vraiment gentil de la documentation pour toutes les nouvelles façons d'importer et d'exporter des modules est ES 6 Import-MDN . Une brève description de celui-ci en ce qui concerne votre question, vous pourriez avoir soit:
Déclaré le composant ont été d'exportation comme le "défaut" du composant que ce module a été l'exportation:
export default class MyNavbar extends React.Component {
, et donc lors de l'Importation de votre "MyNavbar" vous N'avez PAS à mettre des accolades autour d'elle :import MyNavbar from './comp/my-navbar.jsx';
.Ne pas mettre des accolades autour d'une importation est bien de dire le document que cette composante a été déclaré comme un 'exportation par défaut". Si ce n'était pas, vous obtiendrez un message d'erreur (comme vous l'avez fait).
Si vous ne voulez pas de déclarer votre "MyNavbar" comme une exportation par défaut lors de l'exportation d'elle :
export class MyNavbar extends React.Component {
, alors que vous auriez à envelopper votre importation de " MyNavbar dans des accolades:import {MyNavbar} from './comp/my-navbar.jsx';
Je pense que depuis tu n'avais qu'un seul composant dans votre". /comp/mon-barre de navigation.jsx " fichier c'est cool d'en faire l'exportation par défaut. Si tu avais eu plus de composants comme MyNavbar1, MyNavbar2, MyNavbar3 alors je ne voudrais pas faire ou à leur défaut, et pour importer des éléments sélectionnés d'un module lorsque le module n'a pas déclaré de toute chose un défaut, vous pouvez utiliser:
import {foo, bar} from "my-module";
où foo et bar sont à plusieurs membres de votre module.Absolument lire le MDN doc il a de bons exemples de la syntaxe. Espérons que cela aide avec un peu plus d'une explication pour toute personne qui cherche à faire joujou avec de l'ES 6 et composant des importations/exportations de Réagir.
J'Espère que cela est Utile
L'étape 1: App.js est (module principal) importer le Module de Connexion
Étape 2: Créer Dossier initial et de créer login.js fichier et de le personnaliser à vos besoins, rendre automatiquement à App.js Exemple Login.js
Il y a deux manières d'importer des composants de réagir et de la manière recommandée est de la composante façon
PFB explication détaillée
De la bibliothèque d'importer des
C'est agréable et pratique, mais ce n'est pas seulement bundles Bouton et FlatButton (et leurs dépendances), mais l'ensemble des bibliothèques.
Composant d'importer des
Une façon d'y remédier est d'essayer d'importer ou d'exiger ce qui est nécessaire, permet de dire que le composant façon. En utilisant le même exemple:
Cela ne bundle Bouton, FlatButton et leurs dépendances. Mais pas l'ensemble de la bibliothèque. Je voudrais donc essayer de se débarrasser de tous vos bibliothèque de l'importation et l'utilisation du composant de manière à la place.
Si vous n'utilisez pas beaucoup de composants, puis il devrait réduire considérablement la taille de votre fichier empaqueté.