React-redux connect（）无法将定义为类的组件定义为扩展React.Component

我可能会丢失一些东西，但我找不到任何示例，其中connect()包装定义为类的组件（扩展为React.Component），它总是包装定义为简单功能的组件。React-redux connect（）无法将定义为类的组件定义为扩展React.Component

像这样的电话：

connect(mapStateToProps, mapDispatchToProps)(HomeView)

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

任何帮助将不胜感激。

编辑（抱歉的代码ammount的，我不知道什么可能是相关的）：

路线/主页/分量/ 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

路线/主页/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; 
}

路线/首页/集装箱/ HomeCont ainer.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

来源

2017-02-24 asdf

请分享更多的代码。你可以在'connect（）'内部封装一个扩展'Component'的组件。 https://github.com/ming-soon/mern-starter/blob/master/app/routes/User/containers/ListContainer.js#L52 –

你可以显示你在哪里使用这个组件（父），你是看到错误？ –

你实际上是正确包装你的组件类connect()。你的问题是在其他地方，在路线/主页/ index.js：

import HomeContainer from './containers/HomeContainer' 

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

的HomeContainer默认出口是higher-order class returned by connect。然后，您正在尝试使用HomeContainer这里的功能，就像你的控制台错误说：

HomeContainer(store)

。

来源

2017-02-25 17:49:44

您可以紧裹阵营组成部分，无论是课程还是功能组件，请使用react-redux connect。

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

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

来源

2017-02-24 22:28:28

React-redux connect（）无法将定义为类的组件定义为扩展React.Component

回答

相关问题