React-redux connect() 无法包装定义为 class 扩展 React.Component 的组件

Question

我可能遗漏了一些东西，但我找不到任何示例，其中 connect() 包装定义为 class 的组件（扩展 React.Component），它总是包装定义的组件作为一个简单的函数。

这样的调用：

connect(mapStateToProps, mapDispatchToProps)(HomeView)

其中 HomeView extends React.Component，我收到 Cannot call a class as a function 错误。

如有任何帮助，我们将不胜感激。

编辑（抱歉，代码量太大，我不知道什么是相关的）：

routes/Home/components/HomeView.js

import React from 'react'
import './HomeView.scss'

class HomeView extends React.Component {
  render() {
    return (
      <div>
        <h4>Home</h4>
        <div id="g-signin2" data-onsuccess={this.props.signin} />
      </div>
    )
  }

  componentDidMount() {
        gapi.signin2.render('g-signin2', {
            'scope': 'profile email',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'dark'
        });
  }
}

HomeView.propTypes = {
  signin : React.PropTypes.func.isRequired
}

export default HomeView

routes/Home/modules/home.js

export const HOME_SIGNIN = 'HOME_SIGNIN'

export function signin(newUser) {
    return {
        type: HOME_SIGNIN,
        payload: newUser
    }
}

export const actions = {
    signin
}

const ACTION_HANDLERS = {
  [HOME_SIGNIN] : (state, action) => {
      debugger;
      return Object.assign({}, state, {user: action.payload});
  }
}

const initialState = {
  user: null
}
export default function homeReducer(state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type];

  return handler ? handler(state, action) : state;
}

routes/Home/containers/HomeContainer.js

import {connect} from 'react-redux'
import {signin} from '../modules/home'

import HomeView from '../components/HomeView'

const mapDispatchToProps = {
  signin
}

const mapStateToProps = (state) => ({
  user: state.user
})

export default connect(mapStateToProps, mapDispatchToProps)(HomeView)

routes/Home/index.js

import HomeContainer from './containers/HomeContainer'

export default (store) => {
  component : HomeContainer(store)
}

routes/index.js

import CoreLayout from '../layouts/CoreLayout'
import HomeRoute from './Home'

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : HomeRoute(store),
  childRoutes : []
})

export default createRoutes

Answer 1

您可以包装 React 组件，无论它是 class 还是功能组件，都可以使用 react-redux connect。

class MyDiv extends React.Component {
  render() {
    return <div>hi</div>
  }
}

export default connect(({ stateStuff }) => ({ stateStuff }))(MyDiv);

Answer 2

您实际上在 connect() 中正确包装了您的组件 class。你的问题在别处，在 routes/Home/index.js:

import HomeContainer from './containers/HomeContainer'

export default (store) => {
  component : HomeContainer(store)
}

HomeContainer 的默认导出是 higher-order class returned by connect。然后你试图在这里使用 HomeContainer 作为一个函数，就像你的控制台错误说的那样：

    HomeContainer(store)

.

React-redux connect() 无法包装定义为 class 扩展 React.Component 的组件

React-redux connect() cannot wrap component defined as a class extending React.Component

reactjs

react-redux