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

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

正如您所看到的，我将文件命名为 index.js ，它阻止我在导入声明中写入它。如果要使用 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;

Answer 3

定义函数

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/

Answer 4

我使用函数返回组件。

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

然后

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

Answer 5

您只需将多个组件导出为数组：

module.exports = [Component1, Component2]

然后使用组件：

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

单个模块中的多个React组件

5 个答案:

/components/index.js

IMPORT