Warum kann ich hier kein HOC in React verwenden?

Question

Ich habe diese HOC, I-Code der Übersichtlichkeit halber weggelassen habe:

const TestWrapper = (Component) => { 
    return function() { 
    return <Component /> 
    } 
} 

die wie folgt aufgerufen:

const b = <Breadcrumbs items={ crumbs } /> 

const ConnectedAppHeader = TestWrapper(b); 

return (
    <div> 
    <ConnectedAppHeader /> 
    </div> 
) 

Ich habe eine Komponente Breadcrumbs benannt, die eine Stütze nimmt. Das läuft OK wenn ich es nur mit <Breadcrumbs items={ crumbs } /> benutze. Aber sobald ich versuche, es zu wickeln im TestWrapper bekomme ich diesen Fehler:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Ich habe natürlich mein Rendering-Typen falsch, aber ich bin fest. Wie bekomme ich dieses HOC?

Answer 1

HOCs erwarten Komponente Funktionen als Argumente - keine tatsächliche Instanz der Komponente Funktion. Sie versuchen, ein Breadcrumbs Element zu übergeben, wenn Sie dieBreadcrumbs Funktion/Klasse selbst übergeben sollen. Das liegt daran, dass Sie in TestWrapper ein neues Element erstellen - Sie können kein Element aus einem Element erstellen, Sie müssen ein Element aus der tatsächlichen Klasse oder Funktion erstellen.

Zum Beispiel könnten Sie den Wrapper modifizieren zu werden:

const TestWrapper = (Component, items) => { 
    return function() { 
    return <Component items={items} /> 
    } 
} 

Dann ist es wie so verwenden:

const ConnectedAppHeader = TestWrapper(Breadcrumbs, crumbs);