地理位置:如何在组件之间传递坐标?

时间:2018-09-03 10:35:49

标签: javascript reactjs

我正在使用React创建一个天气应用程序的项目。

我正在使用react-geolocation提供用户所在位置的纬度和经度坐标。然后,我想使用这些坐标注入freeCodeCamp Weather API中以自动生成用户的本地天气:

例如https://fcc-weather-api.glitch.me/api/current?lat={insert lat}&lon{insert lon}

我创建了两个组件来实现此目的:

  1. <Main />
  2. <Location />

我的问题是将纬度和经度坐标从<Location />传递到<Main />。请在下面查看我的尝试:

class Location extends Component {
  render() {
    return(
      <div>
        <Geolocation
    render={({
      fetchingPosition,
      position: { coords: { latitude, longitude } = {} } = {},
      error,
      getCurrentPosition
    }) =>
      <div>
        {error &&
          <div>
            {error.message}
          </div>}
        { latitude && longitude && <Main latitude={latitude} longitude={longitude} />}
      </div>}
        />
      </div>
    )
  }
}


class Main extends Component {
    constructor(props) {
      super(props)
      this.state = {
        lat: null,
        lon: null
      }
    } 
    componentDidMount() {
      axios.get(`https://fcc-weather-api.glitch.me/api/current?lat={this.props.latitude}&lon={this.props.longitude}`)
      .then(res => {
        console.log(res.data);
        // set state with response data e.g. this.setState()
      })
    } 
      render() {
        return (
          <div>
            // Weather Data 
          </div>
        );
      }
}

我相信可以通过使用“道具”将数据从父(位置)传递到子(主要)组件吗?

如果这不可能,我考虑过使用HTML5 Geolocation API。

所有答案将不胜感激。

1 个答案:

答案 0 :(得分:0)

您可以使用**Html5 Geolocation API**获取当前位置,并且需要向应用中添加额外的软件包以增加应用大小。

这里是示例:

class Main extends Component {
constructor(props) {
  super(props)
  this.state = {
    lat: null,
    lon: null
  }
    } 
    componentDidMount() {
     if (navigator.geolocation)
      navigator.geolocation.getCurrentPosition(this.showPosition, this.showError, options);

}
  showPosition = (position) => {

        axios.get(`https://fcc-weather-api.glitch.me/api/current?lat={position.coords.latitude}&lon={position.coords.longitude}`)
      .then(res => {
        console.log(res.data);
        // set state with response data e.g. this.setState()
      })
    }
      }
});
}

  showError = (error) => {
    console.warn("Error", error);
  }

  render() {
    return (
      <div>
        // Weather Data 
      </div>
    );
  }
}

PS 检查语法错误(如果有的话)