Question

我一直以这种方式创建我的观点：

var SettingsView = React.createClass({
  render: function() {
    return (
      <View>
        <TouchableHighlight onPress={this.donePressed}>
          //left out styling code for simplicity
        </TouchableHighlight>
      </View>
    );
  },

  donePressed: function() {
    this.props.navigator.pop();
  },
});

这很好用。 donePressed是一个事件处理程序，它与TouchableHighlight中的render相关联（未显示）。

今天我试着将它重构为：

class SettingsView extend React.Component {
  render() {
    //same stuff as above
  }

  donePressed() {
    this.props.navigator.pop();
  }
}

这使得设置屏幕正常。但是当donePressed触发时，屏幕变为红色，表示无法找到this.props.navigator。

我不确定这里发生了什么，请帮助我！

编辑：

此屏幕通过此方法从另一个页面通过另一个触摸事件处理程序启动：

settingsTapped: function() {
  this.props.navigator.push({
    name: 'SettingsView',
    component: SettingsView,
  })
},

我也尝试在passProps: this.props.navigator内添加settingsTapped。我最困惑的是为什么改变我创建课程的方式会突然使this.props.navigator不可见。

Answer 1

我认为它不起作用的原因是因为你使用的是Classes而不是createClass函数，this不再绑定到正确的范围。您可能需要使用es6 fat arrow函数将this词法绑定到正确的范围，如下所示：

onPress={ () => this.donePressed() }

您也可以这样做以使其发挥作用：

onPress={ this.donePressed.bind(this) }

无法访问this.props.navigator

1 个答案: