Question

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

这样的电话：

connect(mapStateToProps, mapDispatchToProps)(HomeView)

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

非常感谢任何帮助。

编辑（对不起代码，我不知道可能相关的内容）：

路由/主页/组件/ 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

路由/主页/模块/ 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;
}

路由/主页/容器/ 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)

路由/主页/ index.js

import HomeContainer from './containers/HomeContainer'

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

路由/ 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);

Answer 2

您实际上是在connect()中正确包装组件类。你的问题出在其他地方，在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（）不能包装定义为扩展React.Component的类的组件

2 个答案: