单个模块中的多个React组件

Question

我是整个浏览器的新手.我一直在尝试使用browserify + reactify + gulp来转换,缩小和组合React应用程序.只要我有一个单一React.createClass的module.exports = MyComponent一切都工作正常.由于我有几个共享组件,我物理托管在同一个文件中并在项目中重用,我想导出多个组件.我试过一个数组:

module.exports = [Component1, Component2]

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

module.exports = {Comp1: Componenet1, Comp2: Component2}并且还尝试在createClass对象中嵌入调用,但这没有帮助.

有没有办法做到这一点,还是我必须将每个组件拆分成一个单独的JSX文件？

Answer 1

您可以这样做,将index.js文件放入您的/components/文件夹中

/components/index.js

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


module.exports = {
  User,
  Users
}

进口

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

如您所见,我将文件命名为index.js,它阻止我在import声明中写入它.如果您想使用除index.js之外的其他名称命名文件,则必须在导入中写入文件的名称,Node不会猜到它!^^

Answer 2

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

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

那么他们在哪里使用呢

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