时间戳

首页 > 解决方案 > 这个语法是什么意思 export default connect(mapStatetoProps, mapDispatchToProps)(LandingComponent)

reactjs - 这个语法是什么意思 export default connect(mapStatetoProps, mapDispatchToProps)(LandingComponent)

问题描述

我拥有的模块包含以下行。connect 似乎有两对括号。这是什么意思？

export default connect(mapStatetoProps, mapDispatchToProps).    
(LandingComponent)

试图查找各种文档

import { connect } from 'react-redux'
import { LandingComponent } from './Landing'

const mapStatetoProps = state => {
  return {}
}

const mapDispatchToProps = dispatch => {
  return {}
}

export default connect(mapStatetoProps, mapDispatchToProps)
(LandingComponent)

期望理解语法的含义。

标签： reactjs

解决方案

第二组括号是因为connect(..., ...)返回一个函数。这个函数是一个组件装饰器，这就是它与登陆组件类一起调用的原因。

如果你把它分开，它可能会变得更清楚：

const decorate = connect(mapStatetoProps, mapDispatchToProps);
const ReduxConnectedLandingComponent = decorate(LandingComponent);
export default ReduxConnectedLandingComponent;

在这种情况下decorate，是一个接受单个组件并返回一个组件的函数。即，它采用普通组件并返回一个更智能的组件，该组件从层次结构中最近提供的商店中提取道具。

推荐阅读