ES6如何进行多个默认导出

Question

我仍在学习使用React+Redux和ES6。我正在尝试实现Socket.IO，并遇到将Socket.IO连接导出到我的Redux连接的问题。

Redux连接

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

socketio连接

export default socketConnect(App);

问题 如何正确使用语法使它们协同工作？

- edmamerto

---

只有一个默认导出，因为当模块的使用者进行未命名的导入时，只有一件事情可以被分配（即默认导出）。我不知道你在尝试做什么关于react+redux，但你应该为其中一个导出使用命名导出。这里是一个快速的导入/导出指南和ECMAScript 6模块：最终语法。 - jfriend00

请参考此链接 https://dev59.com/9lgR5IYBdhLWcg3wbcz2#41338672，一个文件只能有一个默认导出，因此您可以将其他内容作为命名导出进行导出。 - Shubham Khatri

Answer 1

您不能有多个默认导出。

相反，请使用命名导出。

// moduleName.js    

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

export const RealTimeApp = socketConnect(App);

按名称导出所需内容。

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

- AJcodez

---

这里，你没有使用默认导出。那么我们可以在任何一个函数或变量中写入默认导出吗？ - Chetan Nada

@ChetanNada: 是的 :) - Prid

Answer 2

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

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

export const RealTimeApp = socketConnect(App);

之后，您可以导入您的导出文件：

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

- lebol

Answer 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();

- Jeff Dege

---

你并非在输出一个倍数，而是在激励一个包含两个成员的对象。 - Jeff Dege

我认为这是导出一个包含两个成员的对象。 - stuckoverflow

Answer 4

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

- williamcodes

---

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

Answer 5

export default { constOne, constTwo } 和 import data from './data.js' 就可以搞定了。要访问目标文件中的数据，可以这样写：{data.constOne} 或者 {data.constTwo}

示例

假设我们有一个如下所示的 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 (
     <div>
        {data.summary.map((el) => <p>{el.label}</p> )}
     </div>
  )
}

- Gass

Answer 6

在 JavaScript 中，有两种主要的导出值的方式：默认导出和命名导出。但是你可以在同一个文件中同时使用它们中的一个或者两个。一个文件最多只能有一个默认导出，但是可以有任意多个命名导出。

- Prateek Yadav