如何调用平面列表渲染函数中的其他函数？

Question

我有一个Flatlist，我在这个呈现函数中调用了其他函数。

   otherFunc(){
       alert('some thing')
   }
   item(data){
      return(
          //...something..
          {this.otherFunc()} <<<<<<<<<problem is here...its undefined
      );
   }
   render() {
       <FlatList
            ref={ref => this.scrollView = ref}
            data={this.state.foods}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this.Item}
            horizontal
            onEndReached={(x) => { this.loadMore() }}
            onEndReachedThreshold={0.5}
      />
   }

我在this.Item中返回一些它们在Flatlist中呈现的内容，但是我不能在this.item中调用组件的其他函数！我甚至不能指出this.props.navigation或任何其他this关键字在里面。我得到了未定义的对象错误。

Answer 1

当在this.item组件中使用FlatList时，需要将该函数绑定到类中，有三种主要方法可以做到这一点：

• 在构造函数中： 构造器(Props){ this.item = this.item.bind( this )；//在处处使用this.item时，这将引用方法}中的类。
• 如果使用的是实验性的公共类字段语法，则可以使用类字段正确绑定回调： item = (data) => {//现在引用类}
• 或直接在组件中： this.scrollView = ref} data={this.state.foods} extraData={this.state} keyExtractor={this._keyExtractor} renderItem={(data) => this.item(data)}水平onEndReached={(x) => { this.loadMore() } onEndReachedThreshold={0.5} />

我更喜欢第二条路