Meilleure façon d'utiliser le rendu conditionnel dans React Native

Question

Je travaille sur une application React Native. Dans l'application, lorsque l'utilisateur se connecte, un appel API est effectué sur le serveur pour extraire les données à l'aide de redux-saga. Dans le magasin de redux, je maintiens une variable booléenne "fetchingData". Il est défini sur 'true' une fois l'appel d'API démarré et défini sur 'false' une fois les données extraites ou une erreur se produit. Maintenant, je veux afficher un spinner lorsque les données sont récupérées, et un FlatList lorsque les données sont récupérées. Je sais que je peux le faire en enveloppant l'instruction return dans une condition if-else. Je suppose qu'il doit y avoir un meilleur moyen de le faire. Si quelqu'un peut m'aider avec ceci, s'il vous plaît dites-moi un bon moyen d'obtenir ce rendu conditionnel dans React Native. Merci d'avance.

Answer 1

Je ne pense pas. Lorsque la méthode render() est appelée, le composant approprié doit être renvoyé en fonction de l'état.

render() { 
    const isLoading = this.state.isLoading 
    return isLoading ? 
     <Spinner /> //return a spinner 
     : 
     <FlatList /> return a list with data 
} 

Answer 2

Si cela est un modèle que vous utilisez partout il y a plusieurs façons de faire abstraction du motif sur:

1. Création d'un <Loading /> générique composant:

   class Loading extends React.Component { 
       static defaultProps = { 
       waitingElement: <Spinner />, 
       renderedElement: null 
       }; 
   
       render() { 
       return this.props.loading ? this.props.waitingElement : this.props.renderedElement; 
       } 
   } 
   
   // In some other component's `render`:   
   <Loading renderedElement={<component with=props />}, loading={this.state.isWaiting} /> 
   

2. Utilisez un-supérieur commander un composant pour envelopper vos composants:

   function withLoading(Component, spinner = <Spinner />) { 
       return class extends Component { 
       render() { 
        if (this.props.loading) return spinner; 
        return super.render(); 
       } 
       }; 
   } 
   
   // Some other file completely 
   export default withLoading(class MyComponent { 
       render() { 
       return "Happy path only!"; 
       } 
   });