ES6+/React Native 类属性：第一个未定义答案

【问题标题】：ES6+ / React Native class properties: The first one is undefinedES6+/React Native 类属性：第一个未定义
【发布时间】：2018-12-07 06:59:57
【问题描述】：

我正在尝试在我的 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>;
  }
}

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 class-properties

【解决方案1】：

panResponder 属性已定义。 panResponder 变量不是。

state = { panResponder } 指的是panResponder 变量。相反，它应该是：

state = { panResponder: this.panResponder };

我必须在这里使用构造函数吗？

这里不需要显式的constructor 函数，因为类字段是它的一部分。函数范围允许定义一个变量并使用对象字面量速记。它在这里并没有提供真正的好处，但如果不需要panResponder property，可以省略它以支持变量：

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

  this.state = { panResponder };
}

【讨论】：

不客气。我提供了有关变量与属性的更新。如果您不在其他任何地方使用 panResponder 属性，则不需要它。

【解决方案2】：

使用 this.panResponder

它会解决你的问题。

希望对你有帮助

【讨论】：

state = { panResponder: this.panResponder }; 做到了！非常感谢！