Die beste Methode, bedingtes Rendering in React Native zu verwenden

Question

Ich arbeite an einer React Native-Anwendung. Wenn sich der Benutzer in der App anmeldet, wird ein API-Aufruf an den Server gesendet, um die Daten mithilfe von redux-saga abzurufen. Im Redox-Speicher pflege ich eine boolesche Variable "fetchingData". Es wird auf 'wahr' gesetzt, sobald der API-Aufruf gestartet wurde, und auf 'falsch' gesetzt, sobald die Daten abgerufen wurden oder ein Fehler auftritt. Jetzt möchte ich einen Spinner anzeigen, wenn die Daten abgerufen werden, und eine FlatList, wenn die Daten abgerufen werden. Ich weiß, dass ich dies tun kann, indem ich die return-Anweisung in eine if-else-Bedingung verpacke. Ich nehme an, es muss einen besseren Weg geben, dies zu tun. Wenn mir jemand dabei helfen kann, erzähle mir bitte einen guten Weg, dieses bedingte Rendering in React Native zu erreichen. Vielen Dank im Voraus.

Answer 1

Ich glaube nicht. Wenn die Methode render() aufgerufen wird, muss die entsprechende Komponente basierend auf dem Status zurückgegeben werden.

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

Answer 2

Wenn dies ein Muster, das Sie überall verwenden gibt es mehrere Möglichkeiten, um abstrakte das Muster aus:

1. eine allgemeine <Loading /> Komponente erstellen:

   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. ein höher- Verwenden Um die Komponente zu verpacken:

   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!"; 
       } 
   });