我仍在学习使用React+Redux和ES6。我正在尝试实现Socket.IO,并遇到将Socket.IO连接导出到我的Redux连接的问题。
Redux连接
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
socketio连接
export default socketConnect(App);
问题 如何正确使用语法使它们协同工作?
我仍在学习使用React+Redux和ES6。我正在尝试实现Socket.IO,并遇到将Socket.IO连接导出到我的Redux连接的问题。
Redux连接
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
socketio连接
export default socketConnect(App);
问题 如何正确使用语法使它们协同工作?
您不能有多个默认导出。
相反,请使用命名导出。
// moduleName.js
export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)
export const RealTimeApp = socketConnect(App);
按名称导出所需内容。
// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"
你可以混合使用默认导出和命名导出。
export default ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)
export const RealTimeApp = socketConnect(App);
之后,您可以导入您的导出文件:
import ConnectedUserList, { RealTimeApp } from "./moduleName"
我没看到有人提到的一种可能性是,虽然只能有一个默认导出,但你可以导出一个包含多个成员的对象:
// 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 () => {
return {export1, export2};
}
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>
)
}
在 JavaScript 中,有两种主要的导出值的方式:默认导出和命名导出。但是你可以在同一个文件中同时使用它们中的一个或者两个。一个文件最多只能有一个默认导出,但是可以有任意多个命名导出。