javascript - react native : export default App with multiple module wraps

Question

我的 React Native 项目中有以下 App.js:

class App extends Component {

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

      );
    }

}
export default App = codePush(App);

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

export default withAuthenticator(App);

^^ 当我已经将 codePush 包裹在要导出的 App 组件中时，我该怎么做？

Answer 1

TL；博士:withAuthenticator 基本上是一个 higher order component它接受一个组件，装饰它(即提供一些特殊的 Prop 或各种自定义)并返回一个由您传入的组件组成的新组件。因此，在您的情况下，如果您想要多个 HOC，您可以简单地说 -

export default withAuthenticator(codePush(App))

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

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

如果您正在使用 babel，请查看此 transform-decorators babel 插件以确保装饰器正确转译。