2017-02-24 9 views
2

何かが見つからない場合がありますが、connect()がクラスとして定義されたコンポーネントをラップする例は見つかりません。(常にReact.Component)単純な関数として定義されたコンポーネントをラップします。このようなReact-redux connect()はReact.Componentを継承するクラスとして定義されたコンポーネントをラップできません

コール:HomeView extends React.Componentが、私はCannot call a class as a functionエラーを取得する

connect(mapStateToProps, mapDispatchToProps)(HomeView) 

ご協力いただければ幸いです。

編集(コードの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

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 
+0

もっとコードを共有してください。 'connect()'の内部に 'Component'を拡張したコンポーネントをラップすることができます。 https://github.com/ming-soon/mern-starter/blob/master/app/routes/User/containers/ListContainer.js#L52 –

+0

あなたが使用しているこのコンポーネント(親)エラーが表示されますか? –

答えて

1

実際には、コンポーネントクラスを正しくconnect()にラップしています。あなたの問題は、ルート/ホーム/ index.jsで、他の場所である:

import HomeContainer from './containers/HomeContainer' 

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

HomeContainerのデフォルトのエクスポートがhigher-order class returned by connectです。

HomeContainer(store) 

:次に、あなたのコンソールエラーが言う同じように、ここでの関数としてHomeContainerを使用しようとしています。

3

ainer.jsあなたはコンポーネントに反応ラップすることができ、それがクラスであっても機能的なコンポーネントであれ、react-reduxの場合connect

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

export default connect(({ stateStuff }) => ({ stateStuff }))(MyDiv); 
関連する問題