单个模块中有多个React组件 [英] Multiple React components in a single module

问题描述

我是整个浏览器的新手。
我一直在尝试使用browserify + reactify + gulp来转换，缩小和合并React应用程序。
只要我有一个 React.createClass 与一个 module.exports = MyComponent 一切正常精细。
由于我有几个共享组件，我物理地托管在同一个文件中并在各个项目中重复使用，因此我想导出多个组件。
我尝试了一个数组：

module.exports = [Component1，Component2]

，并且还尝试了一个具有多个属性的对象：

module.exports = {Comp1：而且也试图在对象中插入对 createClass 的调用，但这没有帮助。 p>

有没有办法做到这一点，或者我必须将每个组件拆分为单独的JSX文件？

解决方案

我已经将多个组件放在一个文件中并按照您的建议导出对象。

  module.exports = {
 comp1：Component1，
 comp2：Component2 
} 
  

然后他们在哪里使用

  var comp1 = require（'your / path / to / components'）。comp1; 
 var comp2 = require（'your / path / to / components'）。comp2; 
  

I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components I physically host in the same file and reuse across projects, I would like to export more than one component. I have tried an array:

module.exports = [Component1, Component2]

and have also tried an object with multiple properties:

module.exports = {Comp1: Componenet1, Comp2: Component2} and have also tried in-lining the calls to createClass in the object, but that didn't help.

Is there a way to do this or do I have to split every component in to a seperate JSX file?

解决方案

I have put multiple components in one file and export the object like you suggested.

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

Then where they are used do

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

这篇关于单个模块中有多个React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！