ES6 + / Свойства React Native: первый не определен

Question

Я пытаюсь использовать panResonder в своем приложении React Native. Я попытался сделать это, используя свойства класса вместо конструктора и 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

Это решит вашу проблему.

Надеюсь, это поможет