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

Question

我可能遗漏了一些东西，但我找不到任何 connect() 包装定义为类的组件(扩展 React.Component)的示例，它始终将定义为简单函数的组件包装起来。

像这样的调用:

connect(mapStateToProps, mapDispatchToProps)(HomeView)

其中 HomeView 扩展了 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-redux connect包装React组件，无论它是类还是函数组件。

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

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