React-redux connect() 不能包装定义为扩展 React.Component 的类的组件 [英] React-redux connect() cannot wrap component defined as a class extending React.Component

问题描述

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

这样的调用:

connect(mapStateToProps, mapDispatchToProps)(HomeView)

在 HomeView 扩展 React.Component 的地方，我得到一个 Cannot call a class as a function 错误.

任何帮助将不胜感激.

编辑(抱歉代码太多，我不知道什么可能相关):

routes/Home/components/HomeView.js

从 'react' 导入 React导入'./HomeView.scss'类 HomeView 扩展了 React.Component {使成为() {返回 (<div><h4>首页</h4><div id="g-signin2" data-onsuccess={this.props.signin}/>

)}componentDidMount() {gapi.signin2.render('g-signin2', {'scope': '个人资料电子邮件',宽度":200，'高度':50，'longtitle':真的，'主题':'黑暗'});}}HomeView.propTypes = {登录:React.PropTypes.func.isRequired}导出默认 HomeView

routes/Home/modules/home.js

export const HOME_SIGNIN = 'HOME_SIGNIN'导出函数登录(新用户){返回 {类型:HOME_SIGNIN，有效载荷:新用户}}导出常量动作 = {登入}const ACTION_HANDLERS = {[HOME_SIGNIN] :(状态，动作)=>{调试器；return Object.assign({}, state, {user: action.payload});}}常量初始状态 = {用户:空}导出默认函数 homeReducer(state = initialState, action) {const handler = ACTION_HANDLERS[action.type];返回处理程序?处理程序(状态，动作):状态；}

routes/Home/containers/HomeContainer.js

import {connect} from 'react-redux'从 '../modules/home' 导入 {signin}从'../components/HomeView' 导入 HomeViewconst mapDispatchToProps = {登入}const mapStateToProps = (状态) =>({用户:state.user})导出默认连接(mapStateToProps，mapDispatchToProps)(HomeView)

routes/Home/index.js

从 './containers/HomeContainer' 导入 HomeContainer导出默认值(商店)=>{组件:HomeContainer(商店)}

routes/index.js

从 '../layouts/CoreLayout' 导入 CoreLayout从 './Home' 导入 HomeRouteexport const createRoutes = (store) =>({小路        : '/'，组件:核心布局，indexRoute : HomeRoute(store),子路由:[]})导出默认创建路由

解决方案

您实际上在 connect() 中正确地包装了您的组件类.您的问题在其他地方，在 routes/Home/index.js 中:

从 './containers/HomeContainer' 导入 HomeContainer导出默认值(商店)=>{组件:HomeContainer(商店)}

HomeContainer 的默认导出是 connect 返回的高阶类.然后，您尝试将 HomeContainer 用作此处的函数，就像您的控制台错误所说:

 HomeContainer(store)

.

I may be missing something, but I can't find any example where connect() wraps a component defined as a class (extending React.Component), it always wraps components defined as a simple function.

A call like this:

connect(mapStateToProps, mapDispatchToProps)(HomeView)

where HomeView extends React.Component, I get a Cannot call a class as a function error.

Any help would be much appreciated.

Edit (sorry for the ammount of code, I don't know what might be relevant):

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

解决方案

you actually are correctly wrapping your component class in connect(). Your problem is elsewhere, in routes/Home/index.js:

import HomeContainer from './containers/HomeContainer'

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

the default export of HomeContainer is the higher-order class returned by connect. You're then trying to use HomeContainer as a function here, just like your console error says:

    HomeContainer(store)

.

这篇关于React-redux connect() 不能包装定义为扩展 React.Component 的类的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！