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

Question

我正在使用 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';

这个包装语法对我来说不是很清楚，所以我不确定要尝试什么。到目前为止，使用导出默认值和其他变体没有产生任何结果。

Answer 1

如果你不使用默认导出，你需要为你导出的东西命名：

export const TrackedComponent1 = composeWithTracker(composer, Loading)(Component1);
export const TrackedComponent2 = composeWithTracker(composer, Loading)(Component2);

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

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

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

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

更新：

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

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

//... you code here

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

因为 Component1.jsx 使用默认导出，所以当您导入它时，您可以根据需要重命名它（例如 _Component1、UntrackedComponent1、...）。如果没有默认导出，您可以改用 import { Component1 } as _Component1。