如何将经度和经度传递给React中的Forecast组件？

Question

我有这段代码：

var Weather = React.createClass({

render: function() {
return (
  <div>
    <Geosuggest
      placeholder="Введіть назву міста!"
      onSuggestSelect={this.onSuggestSelect}
      location={new google.maps.LatLng(53.558572, 9.9278215)}
      radius="20" />

      <Forecast latitude={34.05} longitude={118.25} name='Los Angeles' />
  </div>
)

  },
   onSuggestSelect: function(suggest) {
    console.log(suggest.location);
   }

});

ReactDOM.render(<Weather/>, document.getElementById('weather'));

如何将Lat和Lng从Geosuggest传递到预测？ 将不胜感激帮助

Answer 1

您可以将Geosuggest中的位置存储在组件的状态中，然后将该状态变量传递给<Forecast/>。

E.g：

var Weather = React.createClass({
    getInitialState: function() {
        return {
            location: null
        }
    },

    render: function() {
        var loc = this.state.location;
        // Set lat/lon from geosuggest, or use defaults
        var lat = loc ? loc.latitude : 34.05;
        var lon = loc ? loc.longitude : 118.25;
        return (
          <div>
            <Geosuggest
                  placeholder="Введіть назву міста!"
                  onSuggestSelect={this.onSuggestSelect}
                  location={new google.maps.LatLng(53.558572, 9.9278215)}
                  radius="20" />

            <Forecast latitude={lat} longitude={lon} />
         </div>
        )
    },

    onSuggestSelect: function(suggest) {
       this.setState({location: suggest.location});
    }

 });

ReactDOM.render(<Weather/>, document.getElementById('weather'));