Несколько компонентов React в одном модуле

Я новичок во всем браузере. Я пытаюсь использовать browserify + reactify + gulp для преобразования, минимизации и объединения приложения React. Пока у меня есть один React.createClass с одним module.exports = MyComponent, все работает отлично. Поскольку у меня есть несколько общих компонентов, которые я физически размещаю в одном файле и повторно использую в проектах, я бы хотел экспортировать более одного компонента. Я попробовал массив:

module.exports = [Component1, Component2]

а также попробовал объект с несколькими свойствами:

module.exports = {Comp1: Componenet1, Comp2: Component2}, а также попытались включить вызовы createClass в объекте, но это не помогло.

Есть ли способ сделать это или мне нужно разбить каждый компонент на отдельный файл JSX?

Ответы

Ответ 1

Я поместил несколько компонентов в один файл и экспортировал объект, как вы предлагали.

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

Тогда, где они используются, do

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

Ответ 2

Вы можете сделать это с помощью файла index.js в папку /components/

/components/index.js

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


module.exports = {
  User,
  Users
}

IMPORT

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

Как вы можете видеть, я назвал свой файл index.js, это мешает мне написать его в объявлении импорта. Если вы хотите назвать свой файл с другим именем, чем index.js, вам нужно будет записать имя файла в import, Node не угадает! ^^

Ответ 3

Я использую функцию для возврата компонента.

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

Тогда

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

Ответ 4

Вы можете просто экспортировать несколько компонентов в виде массива:

module.exports = [Component1, Component2]

Затем для использования компонентов:

var MyComponents = require('your/path/to/components');
var Component1 = MyComponents[0];
var Component2 = MyComponents[1];