4

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

2 回答 2

4

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 };
}
于 2018-06-28T09:05:14.347 回答
2

使用 this.panResponder

它会解决你的问题。

希望这可以帮助

于 2018-06-28T09:04:09.000 回答