Question

我使用来自api的数据构建应用程序，我想在应用程序中包含用户的纬度和经度。

我的应用分为两个文件：app.js和main.js

在app.js我渲染组件如下：

render(<Main source="https://api.darksky.net/forecast/apikey/latitude,longitude?units=auto"/>, document.getElementById('app'));

纬度和经度目前在组件源中是硬编码的，我想让它们变得动态。

在我的main.js中，组件使用这样的api：

componentDidMount() {
 this.serverRequest = $.get(this.props.source, function (result) {
  this.setState({
    daily: result.daily.data,
    hourly: result.hourly.data
  });
 }.bind(this));
}

我能够使用HTML地理位置获取用户位置 - 我想我应该存储在构造函数或componentWillMount中，但是我需要一种方法将变量发送到主要组件的源代码中的app.js文件中 - 我想我应该使用道具，如源，但我不知道如何

Answer 1

将经度和纬度作为道具传递到组件中以及在组件内部组合URL可能是一种很好的方法：

render(<Main longitude={longitude} latitude={latitude} />, document.getElementById('app'));

componentDidMount() {
    const url = `https://api.darksky.net/forecast/apikey/${this.props.latitude},${this.props.longitude}?units=auto`;
    this.serverRequest = $.get(url, function (result) {
        this.setState({
            daily: result.daily.data,
            hourly: result.hourly.data
        });
    }.bind(this));
}

Answer 2

由于HTML地理位置是异步的，render()调用可以进入地理定位成功回调：

if (navigator.geolocation){

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    ReactDOM.render(
        <Main lat={ latitude } lon={ longitude } />, document.getElementById('container')
    );
  };

  function error() {
    console.log( 'geolocation error' )
  };


  navigator.geolocation.getCurrentPosition(success, error);

}

https://jsfiddle.net/69z2wepo/62204/

更高级的示例是高阶组件，它执行地理定位并将坐标传递给包装组件。然后，包装组件应检查componentWillReceiveProps方法中的坐标，并在props为非null时执行AJAX请求：

var GeoComponent = Component => React.createClass({
    getInitialState(){
        return {
            lat : null, 
            lon : null
        }
    },

    componentDidMount(){
        navigator.geolocation.getCurrentPosition(this.setCoordinates, err => console.log( err ));
    },

    setCoordinates( position ){
        this.setState({
            lat : position.coords.latitude,
            lon : position.coords.longitude
        })
    },

    render(){
        return <Component lat={ this.state.lat } lon={ this.state.lon } { ...this.props } />;
    }
});

var Main = React.createClass({
    componentWillReceiveProps( nextProps ){
        if( nextProps.lat && nextProps.lon ){
            console.log( 'received coords!' );
            /*
              this.serverRequest = $.get(this.props.source, function (result) {
              this.setState({
              daily: result.daily.data,
              hourly: result.hourly.data
              });
              }.bind(this));
            */
        }
    },

    render(){
        return <div>Latitude: { this.props.lat }, Longitude: { this.props.lon }</div>;
    }

});


ReactDOM.render(
    React.createElement(GeoComponent(Main )),
    document.getElementById('container')
);

https://jsfiddle.net/69z2wepo/62205/

Answer 3

如果我没有弄错，那么您想要实现的是访问app.js中的地理位置信息，不是吗？那你为什么不在app.js内获取用户地理位置并将其传递给Main？代码类似于

app.js

let geo = null;
navigator.geolocation.getCurrentPosition(function(pos) {
  geo = pos;

  render(<Main source={`https://api.darksky.net/forecast/apikey/${geo.coords.latitude},${geo.coords.longitude}?units=auto`}/>, document.getElementById('app'));

  // Below use user's geolocation info as you wish
});

或者，如果您想在获取用户的地理位置信息之前渲染一些占位符，那么您可以让Main组件执行大部分操作并将回调传递给Main以将地理位置信息更新为app.js

app.js

render(<Main updateGeolocation={geo => { /* do stuffs with geo */ }} />, document.getElementById('app'));

main.js

componentDidMount() {
 navigator.geolocation.getCurrentPosition(function(pos) {
  this.serverRequest = $.get(`https://api.darksky.net/forecast/apikey/${pos.coords.latitude},${pos.coords.longitude}?units=auto`, function (result) {
   this.setState({
     daily: result.daily.data,
     hourly: result.hourly.data
   });
  }.bind(this));

  this.props.updateGeolocation(pos);
 }
}

使用道具反应

3 个答案: