javascript - ES6 +/React Native类属性:第一个未定义

我正在尝试在我的React Native应用程序中使用panResonder。我尝试使用类属性而不是构造函数和super()这样做。这是代码:

export default class Deck extends Component {
  panResponder = PanResonder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gesture) => {},
    onPanResponderRelease: () => {}
  });
  state = { panResponder };

  renderCards = () => this.props.data.map(item => this.props.renderCard(item));

  render() {
    return <View>{this.renderCards()}</View>;
  }
}

不幸的是，React抱怨panResponder是未定义的。那个怎么样？我必须在这里使用构造函数吗？

以下代码是唯一对我有用的代码:

export default class Deck extends Component {
  constructor(props) {
    super(props);

    const panResponder = PanResonder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {},
      onPanResponderRelease: () => {}
    });
    this.state = { panResponder };
  }

  renderCards = () => this.props.data.map(item => this.props.renderCard(item));

  render() {
    return <View>{this.renderCards()}</View>;
  }
}

最佳答案

panResponder属性已定义。 panResponder变量不是。
state = { panResponder }是指panResponder变量。相反，它应该是:

state = { panResponder: this.panResponder };

这里不需要显式的constructor函数，因为类字段是其中的一部分。函数范围允许定义变量并使用对象文字的简写形式。它在这里并没有提供真正的好处，但是如果不需要panResponder属性，可以使用变量来省略它:

constructor() {
  const panResponder = PanResonder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gesture) => {},
    onPanResponderRelease: () => {}
  });

  this.state = { panResponder };
}