React.js, где разместить подсказки Google Maps api?

Question

Я создаю приложение Google Maps с помощью React.js.

Моим инстинктом является создание отдельного файла с классом ES6 для обработки поисковых запросов. Внутри класса будет функция, возвращающая результат поиска. Я намерен называть эту функцию изнутри компонента React.

См. Компонент ниже для справки.

Должен ли я перемещать код внутри методов findRoutes() и drawBoxes() для разделения файлов? Это мое первое приложение-ответ - хотите узнать, как лучше всего организовать код. Любые советы очень ценятся.

var MapControl = React.createClass({ 
      getInitialState: function(){ 
       return { 
        originId: '', 
        destinationId: '', 
        radius: 1, 
        search: '', 
        map: {}, 
        travelMode: google.maps.TravelMode.DRIVING 
       } 
      }, 
      handleFormSubmit: function(input){ 
       // Form Input 
       // Call findRoutes() once setState is complete. 
       this.setState({ 
        originId: input.originId, 
        destinationId: input.destinationId, 
        radius: input.radius, 
        search: input.search 
       }, this.findRoutes); 

      }, 
      handleMapRender: function(map){ 
       // Intialized Google Map 
       this.setState({map: map}); 
       directionsService = new google.maps.DirectionsService(); 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       routeBoxer = new RouteBoxer(); 
       directionsDisplay.setMap(map); 
       placesService = new google.maps.places.PlacesService(map); 
      }, 
      findRoutes: function(){ 
       var me = this; 
       if (!this.state.originId || !this.state.destinationId) { 
        alert("findRoutes!"); 
        return; 
       } 
       directionsService.route({ 
        origin: {'placeId': this.state.originId}, 
        destination: {'placeId': this.state.destinationId}, 
        travelMode: this.state.travelMode 
       }, _.bind(function(response, status){ 
        if (status === google.maps.DirectionsStatus.OK) { 
         // me.response = response; 
         directionsDisplay.setDirections(response); 
         var path = response.routes[0].overview_path; 
         this.setState({ 
          routes: response, 
          boxes: routeBoxer.box(path, this.state.radius) 
         },this.drawBoxes); 
        } else { 
         window.alert('Directions config failed due to ' + status); 
        } 
       }, this)); 
      }, 
      drawBoxes: function(){ 
       var boxpolys = new Array(this.state.boxes.length); 
       for (var i = 0; i < this.state.boxes.length; i++) { 
        boxpolys[i] = new google.maps.Rectangle({ 
         bounds: this.state.boxes[i], 
         fillOpacity: 0, 
         strokeOpacity: 1.0, 
         strokeColor: '#000000', 
         strokeWeight: 1, 
         map: this.state.map 
        }); 
       } 
      }, 
      render: function() { 
       return (
        <div className="MapControl"> 
         <h1>Search</h1> 
         <MapForm 
          onFormSubmit={this.handleFormSubmit} 
          map={this.state.map}/> 
         <GMap 
          setMapState={this.handleMapRender} 
          originId= {this.state.originId} 
          destinationId= {this.state.destinationId} 
          radius= {this.state.radius} 
          search= {this.state.search}/> 
        </div> 
       ); 
      } 
     }); 

Answer 1

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

себя React.js не самоуверенный, как вы справиться с остальным вашими потребностями приложений, но несколько библиотек появились в качестве ведущих решений для обработки событий, маршрутизации, услуг, данных и т.д.

Вы должны просмотрите шаблон потока для обзора того, как вы могли бы управлять остальными потребностями приложений для приложений React. https://facebook.github.io/flux/docs/overview.html

Я перешел от Flux к использованию Redux недавно http://redux.js.org/ (который появился в качестве ведущего государственного управления Lib «Fluxish»)

Если вы просто хотите получить что-то и работает быстро и Арен Я пытаюсь полностью погрузиться во все это, я бы переместил метод findRoutes на внешний service, который вы импортируете в ... drawBoxes кажется прекрасным, чтобы оставаться здесь, поскольку он напрямую связан с отображением элементов карты в представлении