无法在 React 中返回带有地理位置坐标的 JSX

Posted 2023-02-23

【中文标题】无法在 React 中返回带有地理位置坐标的 JSX

【英文标题】：Can't return JSX with Geolocation coordinates in React

【发布时间】：2018-09-29 01:09:21

【问题描述】：

我正在尝试使用 Geolocation API 显示我的当前位置。我试图通过在一个方法中返回数据并在render() 的返回中调用该方法来做到这一点。问题是它没有显示任何内容。

我知道我可以返回 JSX，因为类似这样的工作：

test = () => 
        return (
            <h1>Hello World</h1>
        )
    

 render()
        return(
            <div>
                this.test()
            </div>
        )
     

但是当我尝试这个时，最终没有渲染到页面：

currentLocation = () => 
    return navigator.geolocation.getCurrentPosition(position => 
            return (
                <div>
                    <h1>Current Position:</h1>
                    <p>Latitude: position.coords.latitude</p>
                    <p>Longitude: position.coords.longitude</p>
                </div>
            )
        )


    render()
        return(
            <div>
                this.currentLocation()
            </div>
        )
    

【问题讨论】：

控制台是否有任何错误？

不，没有错误。

navigator.geolocation.getCurrentPosition 这一行做什么？可以分享一下它的相关代码吗

【参考方案1】：

class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      lat: null,
      lng: null,
    
  
  componentWillMount() 

    navigator.geolocation.getCurrentPosition(position => 
      this.setState( lat: position.coords.latitude, lng: position.coords.longitude );
    , err => console.log(err)
    );
  

  render() 

    return (
      <div >
        <h1>Current Position:</h1>
        <p>Latitude: this.state.lat</p>
        <p>Longitude: this.state.lng</p>
      </div>
    );
  

【参考方案2】：

为我工作。

     getUserCurrentLocation = () => 
    navigator.geolocation.getCurrentPosition(
      position => 
        this.setState(state => 
          return 
            ...state,
            lat: position.coords.latitude,
            lng: position.coords.longitude
          ;
        );
      ,
      err => console.log(err)
    );
  ;

  componentWillMount() 
    // get user location
    this.getUserCurrentLocation();