React native:使用多个模块换行导出默认App

时间:2018-01-26 00:29:03

标签: javascript react-native aws-amplify

我的反应原生项目中有以下App.js:

class App extends Component {

    render() {
        return (
          <ApolloProvider store={store} client={client}>
        <AppWithNavigationState />
        </ApolloProvider>

      );
    }

}
export default App = codePush(App);

我正在尝试将aws amplify authenticator添加到我的项目(https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development),但步骤告诉我添加:

export default withAuthenticator(App);

^^如果我已经将codePush包装在我要导出的App组件中,该怎么办呢?

1 个答案:

答案 0 :(得分:2)

<强> TL; DR: withAuthenticator基本上是一个higher order component,它接受​​一个组件,装饰它(即提供一些特殊的道具或各种类型的自定义)并返回一个由你传入的组件组成的新组件。所以在你的情况下如果你想要多个HOC,你可以简单地说 -

export default withAuthenticator(codePush(App))

如果您有5个装饰器,那么从可读性的角度来看,这种语法可能会变得很糟糕。在这种情况下,使用新的装饰器语法很有用。有了它,你可以做一些整洁的事情,比如 -

@mySpecialDecoratorThatDoesNiceThings
@withAuthenticator
@codePush
export default class App extends Component {
...
}

如果您使用的是babel,请查看此transform-decorators babel插件,以确保正确编译装饰器。