如何在ListView的renderRow中访问`this`？

Question

我在ListView的一行内为onPress事件运行函数时遇到麻烦。 我正在关注React Native教程，试图从那里继续。 似乎它使用的是ES6语法样式。

这是代码的相关部分。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.something = this.something.bind(this); // <-- Trying this, not even sure why
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

//
//Irrelevant code here. Fetching stuff and renderLoadingView
//

  something = function(){
    console.log('something');
    Alert.alert(
      'Alert Title',
      'alertMessage',
    );
  }


  render() {
    console.log('this', this); //this is an instance of AwesomeProject
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
        />
    );
  }

  renderMovie(movie) {
    console.log('Not this', this); //this is not an instance of AwesomeProject
    return (
      <TouchableHighlight onPress={() => {console.log(this); this.something()}}>
     <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}                    
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}

          >{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
       </TouchableHighlight>
    );
  }
}

//
//More irrelevant code here. Styles and the 
//

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

我无法运行something函数。 我尝试了各种语法，但没有成功。 这个问题似乎是， this不是我希望它是，并且它不具有可变something定义。

我必须使其起作用的唯一方法是在AwesomeProject类外部使用var something = function(){...}声明一个外部变量。

在AwesomeProject中声明时，是否可以访问something AwesomeProject ？ 根据磁通架构，这可能是不好的做法吗？

Answer 1

原来我自己在这里找到了解决方案： https : //github.com/goatslacker/alt/issues/283#issuecomment-115391700

问题是，与ES6语法，你有没有自动绑定 this ，所以你需要自己做。

自发布此答案以来，我学到了更多。 真正的问题是在执行函数时（而不是在声明时） this是“绑定”的。 它指向函数在调用时附加的对象。 例如：

 obj.foo(); //inside foo, this points to obj bar(); //inside bar, this points to the global object (or undefined in strict mode) 

在我的示例中，函数this.renderMovie()作为参数传递。 因此，在ListView中它将是一个“局部变量”。 它将被称为与任何对象“分离”，例如之前的bar()示例，因此this不是我期望的。

可以强制this绑定。

有3种可能的解决方案，我最喜欢第3种：

选项1：在通话时手动绑定

在代码上，将{this.renderMovie}替换为{this.renderMovie.bind(this)}

  render() {
    console.log('this', this); //this is an instance of AwesomeProject
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie.bind(this)} //<-- change here
        style={styles.listView}
        />
    );
  }

选项2：对构造函数进行绑定

当然，绑定正确的函数：

  constructor(props) {
    super(props);
    this.something = this.something.bind(this); // <-- Not this function
    this.renderMovie = this.renderMovie.bind(this); // <-- This function!!
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

选项3：使用箭头语法，让他们完成工作

我最喜欢这个。 您只需要使用箭头语法声明所涉及的函数，因此：

  renderMovie(movie) {
    //code here
  }

变成这个：

  renderMovie = (movie) => {
    //code here
  }

Answer 2

除了https://stackoverflow.com/a/36779517/6100821

选项4：使用绑定运算符

<ListView
    dataSource={this.state.dataSource}
    renderRow={::this.renderMovie} //<-- cleaner, than bind
    style={styles.listView}
    />

注意，这只是一个建议 ，而不是标准！