React Redux rendern verbundene Komponente

Question

Ich verwende die connect Funktion React Redux, um meinen Speicher mit einer React-Komponente zu verbinden. Nachdem es verbunden ist, möchte ich die Komponente rendern. Dies funktioniert:

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

es eine Verbindung mit dem Speicher:

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

    return (
     {content} 
    ) 
    } 
} 

Großen:

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

es jetzt machen. Das alles funktioniert. Allerdings ...

Wenn ich stelle die connect in einer Funktion und geben die connect, wie in:

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

    return InitPage 
} 

Wenn ich versuche jetzt die Komponente zu machen:

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

    return (
     {content} 
    ) 
    } 
} 

ich eine bekommen Fehler:

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

Was ist der richtige Weg, um eine Redux "connected" Komponente von einem zurückzugeben funktionieren?

Answer 1

Falls Sie die Komponente von der Funktion zurückkehren, müssen Sie es wie

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

    return (
     <Content/> 
    ) 
    } 
} 

auch sicher mit einem Großbuchstaben die component beginnt machen zu machen.