结合传递给组件

Question

阅读this SO answer一个功能，我明白，当我通过一个函数的反应成分，我有一个函数在构造函数绑定这样

constructor(props) { 
    super(props); 

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

，不然我会得到一个像这样的错误。

null是不是一个对象：评估this4.functionName

按照他的意见，我势必在构造函数，但我仍然得到同样的错误。

我做了主/从应用阵营基于本机上的电影示例中的反应本地回购，但我不使用此语法

var SearchScreen = React.createClass({ 

（这是回购协议是什么）而是这个ES6风格的语法

class ListOfLists extends Component { 

在我的列表视图中，我呈现一个像这样的行。

class MovieList extends Component{ 
     constructor(props){ 
     super(props); 
     this.selectMovie = this.selectMovie.bind(this); 
     this.state = { 
      dataSource: new ListView.DataSource({ 
      rowHasChanged: (row1, row2) => row1 !== row2, 
      }), 
     }; 
     } 
      renderRow(
      movie: Object, 
      sectionID: number | string, 
      rowID: number | string, 
      highlightRowFunc: (sectionID: ?number | string, rowID: ?number | string) => void, 
     ) { 
      console.log(movie, "in render row", sectionID, rowID); 
      return (
       <ListCell 
       onSelect={() => this.selectMovie(movie)} 
       onHighlight={() => highlightRowFunc(sectionID, rowID)} 
       onUnhighlight={() => highlightRowFunc(null, null)} 
       movie={movie} 
       /> 
      ); 
      } 

     selectMovie(movie: Object) { 
     if (Platform.OS === 'ios') { 
      this.props.navigator.push({ 
      title: movie.name, 
      component: TodoListScreen, 
      passProps: {movie}, 
      }); 
     } else { 
      dismissKeyboard(); 
      this.props.navigator.push({ 
      title: movie.title, 
      name: 'movie', 
      movie: movie, 
      }); 
     } 
     } 
    render(){ 
     var content = this.state.dataSource.getRowCount() === 0 ? 
      <NoMovies /> : 
      <ListView 
      ref="listview" 
      renderSeparator={this.renderSeparator} 
      dataSource={this.state.dataSource} 
      renderFooter={this.renderFooter} 
      renderRow={this.renderRow} 
      automaticallyAdjustContentInsets={false} 
      keyboardDismissMode="on-drag" 
      keyboardShouldPersistTaps={true} 
      showsVerticalScrollIndicator={false} 
      renderRow={this.renderRow} 
    } 

关键行是this.selectMovie(movie)。当我点击了电影名称一排，我得到一个错误

null是不是一个对象：evaluating this4.selectMovie

问：为什么会告诉我null is not an object或者更确切地说，这是为什么功能空？

更新：

我加渲染方法的代码，以显示其中renderRow已经习惯

Answer 1

如何在不修改代码的情况下处理此问题的很多方法是将 this.renderRow = this.renderRow.bind(this)添加到您的类构造函数中。

class New extends Component{ 
    constructor(){ 
    this.renderRow = this.renderRow.bind(this) 
    } 

    render(){...} 
} 

你必须添加属性renderRow = { this.renderRow }，其实与binded to null object。尝试执行renderRow在renderRow安慰this你会发现它是GlobalObject，而不是你希望Class MovieList。

Answer 2

尝试使用ES6语法：

selectMovie = (movie) => { 
    if (Platform.OS === 'ios') { 
    this.props.navigator.push({ 
     title: movie.name, 
     component: TodoListScreen, 
     passProps: {movie}, 
    }); 
    } else { 
    dismissKeyboard(); 
    this.props.navigator.push({ 
     title: movie.title, 
     name: 'movie', 
     movie: movie, 
    }); 
    } 
} 

然后

constructor(props) { 
    super(props); 

    this.selectMovie = this.selectMovie(); 
    this.state = { 
    dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
    }) 
    }; 
} 

和

renderRow = (...) => { 
    return (
    <ListCell 
     onSelect={this.selectMovie(movie)} 
     onHighlight={() => highlightRowFunc(sectionID, rowID)} 
     onUnhighlight={() => highlightRowFunc(null, null)} 
     movie={movie} 
    /> 
); 
}