Question

我是反应原生和ES6的新手。我所有的州都在＆＃34;家长＆＃34;零件。用户单击＆＃34; Child＆＃34;中的按钮。零件。然后它抓取他们的GPS位置（一个功能），通过AJAX（另一个功能）发布结果，最后重定向到成功页面。 Child在这里加载了一个导航器调用：

<ChildComponent btnClick={this._getGps.bind(this)} />

上面按预期工作，父组件如下：

_getGps() {
  navigator.geolocation.getCurrentPosition(
      (position) => {
        this._postResults(position)
      },
      (error) => {
        console.log(error)
      },
      {enableHighAccuracy: true, timeout: 2500, maximumAge: 10000}
    )
}

以上也按预期工作。然后它调用_postResults，它发出.fetch请求。也可以正常工作并返回有效的响应。问题是从响应函数中访问导航器对象。我找不到范围（我已经尝试过navigator.replace和this.navigator.replace：

_postResults(position) {
  fetch('https://my.rest/api', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(position)
    }).then((response) => response.json())
    .then((responseJson) => {
      // this works fine
      this.setState({position:position}) 
      // here is the problem
      navigator.replace({
      id: 'SomeOtherComponent'
      })
    })
    .catch((error) => console.log(error) )
}

导航器始终未定义。所有这些函数（除了初始按钮单击事件）都是父组件。

Answer 1

为此找到了解决方案。当函数作为引用传递时，看起来全局常量不可用，即使该函数在声明的常量的同一文件中起源。＆＃39;这＆＃39;指的是Component对象。从父节点开始，当我包含ChildComponent时，我通过bind：

传递导航器对象

_getGps(n) {
  navigator.geolocation.getCurrentPosition(
      (position) => {
        this._postResults(n,position)
      },
      (error) => {
        console.log(error)
      },
      {enableHighAccuracy: true, timeout: 2500, maximumAge: 10000}
    )
}

当我从ChildComponent调用父_getGps函数时，导航器会自动通过n变量传递（然后传递给_postResults：

_postResults(n, position) {
...

最后，这是_postResults：

的片段

{{1}}

n（导航器）现在在_postResults中可用，并按预期工作。

导航器

1 个答案: