Verwendung von Navigator Geolocation mit Reaktoren

Question

Ich versuche Geolocation-Variablen position.coords.lat/long anzuzeigen, und ich habe Probleme beim Speichern der Werte in einem globalen Bereich. Hier ist der Code:

var GeoLoco = React.createClass({ 
    lat: 0, 
    long: 0, 
    handler: function(position) { 
      this.lat = position.coords.latitude; 
      this.long = position.coords.longitude; 
      console.log("Lat,Long: "+this.lat+","+this.long); 
    }, 
    render: function() { 
      navigator.geolocation.getCurrentPosition(this.handler); 
      return <p>Lat,Long: {this.lat},{this.long}</p>; 
    } 
}); 

console.log zeigt die Standortdaten, aber this.lat und this.long machen als 0

Answer 1

Selbst wenn Ihre Variable Werte geändert, müssen Sie erneut rendern Ihre Komponente zu aktualisieren, was du bist Sehen. Die Komponente state macht es für Sie.

More information here

standardmäßig, wenn Staat oder Requisiten Ihrer Komponente ändern, wird die Komponente neu rendern.

So:

var GeoLoco = React.createClass({ 
    getInitialState: function() { 
    return {lat: 0, long: 0}; 
    }, 
    handler: function(position) { 
    this.setState({ 
     lat: position.coords.latitude, 
     long: position.coords.longitude 
    }); 
    }, 
    render: function() { 
    // If this.state.lat is not equal to 0, do not call again getCurrentPosition() 
    if (!this.state.lat) 
     navigator.geolocation.getCurrentPosition(this.handler); 
    return <p>Lat,Long: {this.state.lat},{this.state.long}</p>; 
    } 
}); 

Wenn Sie nicht state verwenden möchten, können Sie forceUpdate() am Ende der Handler-Methode aufrufen.

handler: function(position) { 
    this.lat = position.coords.latitude; 
    this.long = position.coords.longitude; 
    console.log("Lat,Long: "+this.lat+","+this.long); 
    this.forceUpdate(); 
},