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

Question

我想创建一个函数，它返回一个类似于 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}} />
}

我哪里出错了？我只需要一个简单的例子来让我朝着正确的方向前进，我认为:)

谢谢。

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