ReactJS Loading-Symbol während des Wartens auf Daten

Question

Ich experimentiere mit ReactJS, und ein Großteil meiner Anwendung beruht auf dem Laden von Daten aus einer API, mit Hilfe von jQuery, um mir dabei zu helfen.

Ich habe Laden Text/Symbol Setup, aber es fühlt sich ein bisschen hacky und nicht sehr wiederverwendbar:

ListWrapper = React.createClass({ 
    getInitialState: function() { 
     return { 
      loading: true, 
      listData: [] 
     }; 
    }, 
    componentDidMount: function() { 
     Api.get('/v1/listdata', function (data) { 
      react.setState({ 
        loading: false, 
        listData: data 
      }); 
     }); 
    }, 
    render: function() { 
     return (
      <List loading={this.state.loading} data={this.state.listData} /> 
     ); 
    } 
}); 

List = React.createClass({ 
    render: function() { 

     var mapData; 
     if (this.props.loading) 
      mapData = <Loader />; 
     else { 
      mapData = this.props.data.map(function(item) { 
       return (
        <ListItem name={item.name} /> 
       ); 
      }); 
     } 

     return (
      <div> 
       {mapData} 
      </div> 
     ); 
    } 
}); 

Dies funktioniert gut, aber die gesamte if/else-Anweisung Hinweise von Code hat riecht, da würde ich muss diese Logik überall machen.

Kann wirklich nichts im Internet darüber finden, wie man das am besten angeht ... Was ist ein besserer Weg?

Answer 1

Sie können Ihren vorhandenen Code vereinfachen weniger ausführlich sein nur durch die else-Anweisung zu entfernen:

render: function() { 
     if (this.props.loading) { 
      return <Loader />; 
     } 
     var mapData = this.props.data.map(function(item) { 
      return (
       <ListItem name={item.name} /> 
      ); 
     }); 
     return (
      <div> 
       {mapData} 
      </div> 
     ); 
    } 

Aber eine Lösung, die ich denken kann, ist, Ihre Komponente eine isActive Bool übernehmen und die, wenn Logik in die Bewegungs Ladekomponente anstelle der einzelnen Komponenten. Wenn isActive = true angezeigt wird, wird das Spinner/Lade-Symbol angezeigt. Andernfalls gibt es nur eine Null-Komponente oder leer zurück.

List = React.createClass({ 
    render: function() { 

     var mapData = this.props.data.map(function(item) { 
      return (
       <ListItem name={item.name} /> 
      ); 
     }); 
     return (
      <div> 
       <Loader isActive={this.props.isLoading} /> 
       {mapData} 
      </div> 
     ); 
    } 
}); 

Dieser Fall statt überall die, wenn Logik zu tun, was Sie tun es nur einmal in Ihrem Loader Komponente, und es gibt nur null/leer, wenn seine inaktiv.