此值在函数中为空（React-Native）

Question

根据本地测试，“this”在行渲染函数中似乎为空。因此，这会阻止我在 onPress 属性上绑定本地函数。

我有这个渲染块：

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader} 
            style={styles.listView} />
    );
}

还有一个局部函数

_visitEntryDetail() {
    console.log('test');
}

然后行渲染

_renderRow(something) {
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.container]} 
            onPress={this._visitEntryDetail.bind(this)} >
            <View>
                <Text style={filestyle.text1} >{something.detail}</Text>
                <Text style={filestyle.text2} >{something.size}, {something.timestamp}</Text>
            </View>
        </TouchableHighlight>
    );
}

这会返回

message: null is not an object (evaluating 'this.$FileList_visitEntryDetail')"

在将上面的代码替换为以下代码时，在 renderRow 上检查“this”返回 null：

_renderRow(file) {
    console.log(this);
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.filelistcontainer]} 
             >

带有以下控制台输出：

RCTJSLog> null

不过没关系

render() {
    console.log('inside render. this value is below me');
    console.log(this);
    return (
        <ListView

控制台

RCTJSLog> "inside render. this value is below me"
RCTJSLog> [object Object]

有人可以指出是什么原因造成的。谢谢。

Answer 1

如果您想将函数传递给第 3 方组件，请始终传递这样的函数：

        <Carousel
          renderItem={item => this._renderItem(item)}
        />

当你这样绑定函数时，它不会丢失其他类中的函数实例

Answer 2

NightFury 解决方案的替代方案是使用ES6 Arrow Function 语法，而无需在构造函数中手动绑定函数。您的 render() 将如下所示：

render() {
    return (
       <ListView
           dataSource={this.state.dataSource}
           renderRow={() => this._renderRow()}
           renderHeader={() => this._renderHeader()} 
           style={styles.listView} />
    );
}

Answer 3

this 为 null，因为 _renderRow 尚未绑定到当前类。请记住：

在构造函数中，你需要显式绑定一个函数，如果你想将它传递给任何反应组件，因为有时它不会隐式绑定。

此语句适用于传递给组件的任何函数。例如，您想在按下TouchableHighlight 时调用函数callThisFunction。您可以通过以下方式绑定它：

class SomeComponent extends Component {

  constructor(props) {
    super(props)

    //binding function
    this.renderRow = this.renderRow.bind(this)
    this.callThisFunction = this.callThisFunction.bind(this)
  }

  renderRow() {
    console.log(this) //not null now
    return (
      <View>
        <TouchableHighlight onPress={this.callThisFunction}>
          <Image source={require('image!prev')}/>
        </TouchableHighlight>
      </View>
    )
  }

  callThisFunction() {
    console.log(this) //not null now
  }
}