web-dev-qa-db-fra.com

Plusieurs composants React dans un seul module

Je suis nouveau dans tout le navigateur. J'ai essayé d'utiliser browserify + reactify + gulp pour transformer, minimiser et combiner une application React. Tant que je n'ai qu'une seule React.createClass avec un seul module.exports = MyComponent tout fonctionne bien. Étant donné que j'ai plusieurs composants partagés que j'héberge physiquement dans le même fichier et que je réutilise sur plusieurs projets, je souhaite exporter plus d'un composant. J'ai essayé un tableau:

module.exports = [Component1, Component2]

et ont également essayé un objet avec plusieurs propriétés:

module.exports = {Comp1: Componenet1, Comp2: Component2} et ont également essayé d'intégrer les appels à createClass dans l'objet, mais cela n'a pas aidé.

Existe-t-il un moyen de le faire ou dois-je diviser chaque composant en un fichier JSX séparé?

reactjsgulpbrowserify
18
Elad Lachmi

J'ai mis plusieurs composants dans un fichier et exporté l'objet comme vous l'avez suggéré.

module.exports = {
    comp1: Component1,
    comp2: Component2
}

Ensuite, où ils sont utilisés,

var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;
25
Crob

Vous pouvez faire comme ça, avec un fichier index.js dans votre /components/ dossier

/components/index.js

import Users from './Users/Users';
import User from './Users/User';


module.exports = {
  User,
  Users
}

IMPORTATION

import { Users, User } from './components';

Comme vous pouvez le voir, j'ai nommé mon fichier index.js, cela m'empêche de l'écrire dans la déclaration d'importation. Si vous voulez nommer votre fichier avec un autre nom que index.js, vous devrez écrire le nom du fichier dans l'importation, Node ne sera pas devine! ^^

31
Julha

J'utilise la fonction pour renvoyer le composant.

 module.exports = {
   comp1: function(){
     return Component1;
   }
 }

Alors

var myCompontents = require('./components');
var comp1 = myComponents.comp1();
0
Tim Yeung