React Reduxレンダリング接続コンポーネント

Question

connect React Redux関数を使用して、店舗をReactコンポーネントに接続しています。それが接続された後、コンポーネントをレンダリングします。これは動作します：

class Init extends React.Component { 
    render() { 
    return (
     <View /> // Is really more elaborate 
    ) 
    } 
} 

はストアに接続します

const InitPage = connect(
    state => ({ 
    }), 
    dispatch => ({ 
    }) 
)(Init) 

今それをレンダリング：

class App extends React.Component { 
    render() { 
    const content = <InitPage /> 

    return (
     {content} 
    ) 
    } 
} 

グレート。これはすべて動作します。しかし...

私はのように、関数内connectを配置し、接続を返す：私は今、コンポーネントを描画しようとした場合

const getInitPage =() => { 
    const InitPage = connect(
    state => ({ 
    }), 
    dispatch => ({ 
    }) 
)(Init) 

    return InitPage 
} 

：

class App extends React.Component { 
    render() { 
    const content = getInitPage() 

    return (
     {content} 
    ) 
    } 
} 

私が手エラー：

Invariant Violation: React.Children.only expected to receive a single React element child. 

Redux接続されたコンポーネントを 関数？

Answer 1

あなたは機能からコンポーネントを返却する場合は、あなたはまた、コンポーネント名は大文字で始まることを確認してください

class App extends React.Component { 
    render() { 
    const Content = getInitPage() 

    return (
     <Content/> 
    ) 
    } 
} 

のようにそれをレンダリングする必要があります。