首页 文章

React native：使用多个模块包装导出默认App

提问于
浏览 次
0

我在我的反应原生项目中有以下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组件中时，我该怎么做？

javascript react-native aws-amplify

1 回答

  • 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插件，以确保正确编译装饰器 .

    回复于

相关问题