我是整个浏览器的新手。我一直在尝试使用 browserify + reactify + gulp 来转换、缩小和组合一个 React 应用程序。只要我有一个单身React.createClass，module.exports = MyComponent一切正常。由于我有多个共享组件，我物理托管在同一个文件中并跨项目重复使用，因此我想导出多个组件。我试过一个数组：
module.exports = [Component1, Component2]
并且还尝试了具有多个属性的对象：
module.exports = {Comp1: Componenet1, Comp2: Component2}并且还尝试在createClass对象中内联对 的调用，但这没有帮助。
有没有办法做到这一点，还是我必须将每个组件拆分成一个单独的 JSX 文件？
您可以这样做，将index.js文件放入您的/components/文件夹中
import Users from './Users/Users';
import User from './Users/User';
module.exports = {
User,
Users
}
import { Users, User } from './components';
如您所见，我将我的文件命名为index.js，它阻止我在导入声明中写入它。如果您想使用index.js以外的其他名称命名文件，则必须在导入中写入文件名，Node 不会猜到！^^
我已将多个组件放在一个文件中，并按照您的建议导出对象。
module.exports = {
comp1: Component1,
comp2: Component2
}
那么它们被使用的地方做
var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;
定义函数
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 }
导入您需要
import { sum, sub } from 'myfile'
的功能或所有功能
import * as myfunctions from 'myfile'
并调用为
sum(1+1)或myfunctions.sum(1+1)
源代码：https : //flaviocopes.com/how-to-export-multiple-functions-javascript/
我使用函数返回组件。
module.exports = {
comp1: function(){
return Component1;
}
}
然后
var myCompontents = require('./components');
var comp1 = myComponents.comp1();
以下对我有用。
在单个文件中MultipleComponents.js，添加两个或多个组件，如下所示。
const ComponentA = () => <div>Component A works! </div>
const ComponentB = () => <div>Component B works! </div>
export {ComponentA, ComponentB} // Export this way without using default
现在将这些组件导入到您希望的任何其他组件中，如下所示
import {ComponentA} from 'your/directory/MutlipleFiles;