Reactjs 单个模块中的多个组件

我对整件布朗化的事情还不熟悉。 我一直在尝试使用browserify+reactify+gulp来转换、缩小和组合React应用程序。 只要我有一个

React.createClass

和一个

module.exports=MyComponent

就可以了。 由于我在同一个文件中物理承载了多个共享组件，并且可以跨项目重用，因此我希望导出多个组件。 我尝试了一个数组：

module.exports=[Component1，Component2]

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

module.exports={Comp1:Componenet1，Comp2:Component2}

并尝试在对象中对

createClass

的调用进行排队，但这没有帮助

---

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

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

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

那么它们在哪里使用呢

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

---

我使用函数返回组件

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

然后

---

您可以这样做，将index.js文件放入

/components/

文件夹中

/组件/index.js 进口

---

如您所见，我将我的文件命名为index.js，它阻止我在导入声明中写入它。如果你想用另一个名字命名你的文件，而不是index.js，你必须在导入中写入文件名，节点不会猜到的^^

您可以简单地将多个组件导出为一个数组：

module.exports = [Component1, Component2]

然后使用组件：

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

定义函数

function sum(a, b) {
  return a + b
}
function sub(a, b) {
  return a - b
}
function mul(a, b) {
  return a * b
}

定义导出

export{sum，sub，mul}

导入您需要的函数

从“myfile”导入{sum，sub}

还是所有的功能

import*作为myfile中的myfunctions

并称为

sum（1+1）

或

myfunctions.sum（1+1）

---

src:

如果您只想要comp1，这是个坏主意。在这种情况下，当调用第一个require时，您需要整个模型，并且您正在向浏览器发送不需要的代码。这对webpack2不起作用，因为他们将module.exports更改为只读，如果使用任何“import”语句（es6样式），这是一种不好的做法。为什么要输出数组而不是对象？这在各方面都更好：

var Component1=MyComponents.Component1
var Component2=MyComponents.Component2
@VitalikZaidman因为Op声明“并且还尝试了一个具有多个属性的对象”，是的，一个对象将是更好的实践，如果你想达到最佳效果，我建议使用ES6导入和解构。这给了我一个错误，但使用以下方法是有效的：导出{User，users}我不明白以函数包装器的形式添加另一层间接寻址是如何实现的
module.exports={Component1}
对于导入器和导出器都要简单得多。
module.exports = [Component1, Component2]

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

function sum(a, b) {
  return a + b
}
function sub(a, b) {
  return a - b
}
function mul(a, b) {
  return a * b
}