Question

我正在尝试使用Geolocation API显示我的当前位置。我试图通过在方法中返回数据并在Libs中的return内调用该方法来做到这一点。问题是它什么也不显示。

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

render()

但是当我尝试执行此操作时，没有任何结果最终呈现到页面：

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

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

Answer 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>
    );
  }
}

Answer 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();
  }

无法在React中返回带有Geolocation坐标的JSX

2 个答案: