Javascript 创建在React中返回组件的函数

我想创建一个函数，该函数返回一个类似于React Navigation的组件：

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 />

我看过他们的代码，但还是有点困惑。这是我的简单例子

import onboardingCreator from 'this-package'

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

    console.log("OB", Onboard)


    return (
      <Onboard />
    );
  }
}

然后在另一个文件中：

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

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

我哪里做错了？我只需要一个简单的例子就可以让我走上正确的方向，我想：

---

谢谢。

问题在于函数返回的是组件实例，而不是组件类的定义。如果您希望以函数现在的工作方式呈现实例，它看起来更像这样：

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>;
  }
}

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

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

    return GeneratedComponent;
}

另一方面，如果您想创建一个新组件并返回它，它看起来更像这样：

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>;
  }
}

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

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

    return GeneratedComponent;
}

---

此包在您的本地文件中。我认为您可以从“/此程序包”导入此导入onboardingCreator。顺便说一句，函数返回组件调用高阶组件。