Erstellen einer Funktion, die eine Komponente liefert in Reaktion

Question

Ich möchte eine Funktion erstellen, die eine Komponente ähnlich kehrt wie Reagieren Navigation funktioniert:

const AppNavigator = StackNavigator({ 
    Room: { screen: RoomContainer }, 
    Game: { 
     screen: GameContainer, 
     navigationOptions: { 
      gesturesEnabled: false 
     } 
    }, 
    Catalog: { screen: CatalogContainer } 
}, { 
     headerMode: 'none', 
     mode: 'modal' 
    }) 

Which you can then use like: 

<AppNavigator /> 

ich an ihren Code ausgesehen haben, aber immer noch ein wenig verwirrt. Das ist mein einfaches Beispiel.

import onboardingCreator from 'this-package' 

export default class App extends Component { 
    render() { 
    let Onboard = onboardingCreator({ 
     test: 'cool' 
    }) 

    console.log("OB", Onboard) 


    return (
     <Onboard /> 
    ); 
    } 
} 

Und dann in einer anderen Datei:

export default (props) => { 
    console.log("PROPS", props) 

    return <View style={{backgroundColor: 'green', flex: 1}} /> 
} 

Wohin gehe ich falsch? Ich brauche nur ein einfaches Beispiel, um mich in die richtige Richtung zu bringen, denke ich :)

Danke.

Answer 1

Das Problem ist, dass Ihre Funktion eine Instanz einer Komponente zurückgibt, nicht die Definition der Komponentenklasse. Wenn Sie die Instanz (die Art und Weise die Funktion funktioniert jetzt) ​​machen wollen, wäre es wie folgt aussehen:

import onboardingCreator from 'this-package' 

export default class App extends Component { 
    render() { 
    let onboard = onboardingCreator({ 
     test: 'cool' 
    }) 

    console.log("OB", onboard) 


    return <div>{onboard}</div>; 
    } 
} 

Wenn auf der anderen Seite, können Sie eine neue Komponente erstellen möchten und senden Sie es, würde es sehen Sie eher so:

export default (props) => { 
    console.log("PROPS", props) 

    class GeneratedComponent extends Component { 
     render() { 
      return <View 
       {...props} 
       style={{backgroundColor: 'green', flex: 1}} 
      />; 
     } 
    } 

    return GeneratedComponent; 
}