Question

我正在尝试学习React Native，目前正在尝试创建列表视图。一切都正常加载，这个问题出现在连续的压力下，我得到以下错误。

我来自网络和Objective-c背景，所以这需要一点时间才能进入。这是我用于屏幕的代码。

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight
} from 'react-native'

export default class FeedView extends Component {

  static navigationOptions = {
    title: 'Chat with Feed',
  };

  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
        />
      </View>
    );
  }

  _renderRow( rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void ){
    return (
      <TouchableHighlight onPress={() => {
          this._pressRow(rowID);
          highlightRow(sectionID, rowID);
        }}>
        <View>
          <View style={styles.row}>
            <Text style={styles.text}>Testing</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }

  _pressRow( rowID: number ){

  }

}

var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  }
});

Answer 1

如上面的评论中所述，如果您希望在其他方法中访问this变量，则需要将ES6类方法与this绑定，因为它们不会自动绑定。

我建议将所有绑定放在构造函数中，因为它被认为是一种很好的做法（减少垃圾收集）并使代码更整洁。有关详细信息，请参阅相关的ESLint page。

constructor(props) {
    super(props);

    ...

    this._renderRow = this._renderRow.bind(this);
    this._pressRow = this._pressRow.bind(this);
}

然后，您可以在班级中单独使用this._renderRow，而无需担心绑定。

Answer 2

问题是this函数中的renderRow没有引用context of the React Component，因此您无法访问_pressRow函数

您需要绑定renderRow函数

render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={() => this._renderRow()}
        />
      </View>
    );
  }

_this2.pressRow不是一个函数

2 个答案: