ES6 如何做多个默认导出答案

【问题标题】：ES6 how to do multiple default exportsES6 如何做多个默认导出
【发布时间】：2017-12-02 02:24:40
【问题描述】：

我仍然熟悉 react+redux 和 ES6。我正在尝试实现 socketio，但遇到了必须使用我的 redux 连接导出 socketio 连接的问题。

redux 连接

export default connect(mapStateToProps, matchDispatchToProps)(UserList);

socketio 连接

export default socketConnect(App);

问题使它们一起工作的正确语法是什么？

【问题讨论】：

只有一个默认导出，因为当您的模块的使用者执行未命名的导入时，只能分配一件事（默认导出）。我不知道你想用 react+redux 做什么，但你可能应该为你的一个导出使用命名导出。这是quick import/export guide 和ECMAScript 6 modules: the final syntax。
看到这个stackoverflow.com/questions/41337709/…，一个文件中只能有一个默认导出，所以你可以将另一个导出为命名导出

标签： reactjs ecmascript-6 react-redux

【解决方案1】：

export default { constOne, constTwo }; 和 import data from "./data.js"; 可以解决问题。要访问目标文件中的数据，可以这样：{data.constOne} 或{data.constTwo}

在 React 16.7 中测试的示例

假设我们有以下data.js 文件：

const summary = [  
  { label: "Turned pro", content: "2020" },
  { label: "Profession", content: "Engineer" },
];
const reputation = [
  { community: "Code Review", points: 176 },
  { community: "Game Development", points: 101 }
];

export default { summary, reputation };

导入和使用数据的一种方法如下：

import data from "./data.js";

function App(){
  return <section>
        {data.summary.map((el) => {
          return <p>{el.label}</p>
        })}
      </section>
}

【讨论】：

【解决方案2】：

export default () => {
    return {export1, export2};
}

【讨论】：

我不明白为什么人们一直断言这不起作用，或者它以某种方式导出了两个对象。

【解决方案3】：

我没有看到提到的一种可能性。您只能有一个默认导出，但您导出的可以是具有多个成员的对象：

// MyModule.js
const componentA => () => {return <div>Component A</div>;}
const componentB => () => {return <div>Component B</div>;}

export default { componentA, componentB };

然后：

import MyModule from "./MyModule";

MyModule.componentA();

【讨论】：

你不能在多个导出中使用export default。
您不是在导出一个倍数，而是在劝告一个包含两个成员的对象。
^exporting* 一个包含两个成员的对象，我相信。

【解决方案4】：

您可以混合使用默认导出和命名导出。

export default ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

然后，您可以导入您的导出：

import ConnectedUserList, { RealTimeApp } from "./moduleName"

【讨论】：

【解决方案5】：

您不能拥有多个默认导出。

改为使用命名导出。

// moduleName.js    

export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

要求按名称导出。

// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"

【讨论】：