ReactJS Загрузка значка во время ожидания данных

Question

Я экспериментирую с ReactJS, и большая часть моего приложения полагается на загрузку данных из API, используя jQuery, чтобы помочь мне в этом.

У меня есть загрузки установка текста/значок, но он чувствует себя немного Hacky и не очень многоразовый:

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

Это работает отлично, однако все, если/другое заявление имеет подсказки коды запахов, так как я должны делать эту логику повсюду.

Не может найти что-либо в Интернете о том, как наилучшим образом подойти к этому ... Что лучше?

Answer 1

Вы можете упростить существующий код менее многословным, просто удалив еще заявление:

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

Но одно решение я могу думать ваш компонент принимать isActive логическое значение и перемещение если логики в компонент загрузчика вместо отдельных компонентов. Когда isActive = true отображает значок счетчика/загрузки. В противном случае он просто возвращает нулевой компонент или пустой.

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

Этот случай вместо того, чтобы делать, если логика везде, вы просто сделать это один раз в Loader компонент, и он просто возвращает нуль/пустым, если его неактивным.