Question

我最近一直在学习React Native，我需要在组件之后访问自定义组件的属性，例如感动。我定义了以下组件：

export class OperationBox extends React.Component {
  constructor(props) {
    super(props);
  }

  startOperation() {
    Alert.alert("starting operation " + this.props.operation);
  }

  render() {
    return (
      <TouchableHighlight onPress={this.startOperation}>
          <Text>{this.props.operation}</Text>
      </TouchableHighlight>

    );
  }
}

当触摸组件时，应用程序崩溃，说undefined is not an object when evaluating this.props.operation。但是，如果我像这样定义函数startOperation()：startOperation = () => { ... }，我会得到预期的行为。

现在，我以为我理解这些箭头功能是如何工作的。来自Swift的背景，我觉得它们就像闭包一样，但我肯定错过了一些东西？为什么第一种方式不起作用，但第二种方式呢？

Answer 1

因为函数没有绑定到类，如果定义为：

someFunction() { }

如果定义为：

，则绑定

someFunction = () => { }

另一种可能性是在构造函数中显式绑定它：

constructor(props) {
    super(props);
    this.someFunction = this.someFunction.bind(this);
}

区别在于startOperation函数作为回调传递，并在不同的环境（初始类之外）中执行，因此this指的是不同的对象。

Answer 2

简单回答：在ES6 Classes

funcName() {}创建“类方法”，但funcName = () => {}不创建。

所有ECMASCRIPT 2015 语法标准。

但是，你可以克服这个;）

Is it possible to use arrow functions in classes with ES6?

funcName（）{}和funcName =（）=＆gt;之间的区别ES6中的{}

2 个答案: