在Javascript ES6中导出多个包装函数

时间:2016-11-02 10:08:10

标签: javascript reactjs meteor ecmascript-6

我正在使用react-komposer将React组件与数据提取包装器一起包装。

这是非常基本的,我想在Meteor中包装多个组件。但我无法弄清楚出口模式是什么?

这就是我所拥有的(并给我一个“意外的令牌”错误 - 如果你理解这一点可能很明显!):

// myContainer.jsx
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';

function composer(props, onData) {
  if (Meteor.subscribe('SingleTodoLists').ready()) {
    const todoList = todoLists.find({}).fetch();
    onData(null, { todoList });
  }
}

export composeWithTracker(composer, Loading)(Component1);
export composeWithTracker(composer, Loading)(Component2);

我想像这样导入它们:

import { Component1, Component2 } from './myContainer.jsx';

这个包装器语法对我来说并不是很清楚,所以我不确定要尝试什么。玩出口默认和其他变化到目前为止没有结果。

1 个答案:

答案 0 :(得分:2)

如果您不使用默认导出,则需要为导出的内容命名:

export default composeWithTracker(composer, Loading)(Component1);

如果使用默认导出,则可以省略名称,例如

import _Component1 from './Component1.jsx';
import _Component2 from './Component2.jsx';

//... you code here

export composeWithTracker(composer, Loading)(_Component1);
export composeWithTracker(composer, Loading)(_Component2);

但您只能为每个模块定义一个默认导出

请参阅ES6导出语法的文档:https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

<强>更新

如果要保留原始导出名称:

import { Component1 } as _Component1

由于Component1.jsx使用默认导出,因此在导入时可以根据需要重命名(例如_Component1,UntrackedComponent1,...)。如果没有默认导出,您可以使用ng-repeat-start代替。