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

Question

我正在尝试在我的 React Native 应用程序中使用 panResonder。我尝试使用 class 属性而不是构造函数和 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

使用this.panResponder

它将解决您的问题。

希望对您有所帮助

Answer 2

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

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

state = { panResponder: this.panResponder };

Do I have to use a constructor here?

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

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

  this.state = { panResponder };
}

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

ES6+ / React Native class properties: The first one is undefined

javascript

ecmascript-6

reactjs

react-native

class-properties