Question

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

Answer 1

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 };
}

Answer 2

使用this.panResponder

它将解决您的问题。

希望这会有所帮助

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

2 个答案: