ES6 如何做多个默认导出

Posted 2023-02-22

【中文标题】ES6 如何做多个默认导出

【英文标题】：ES6 how to do multiple default exports

【发布时间】：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。

看到这个***.com/questions/41337709/…，一个文件中只能有一个默认导出，所以你可以将另一个导出为命名导出

【参考方案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"