無法添加函數來創建renderItem內的動態按鈕FlatList

Question

我想添加一個函數來返回基於renderItem FlatList組件內部狀態的按鈕文本。

此代碼返回一個錯誤

功能this.renderButton不是一個函數

更新：

<FlatList 
     data={list} 
     renderItem={this.renderRow} 
    /> 

renderRow({item}) { 
    return(
     <TouchableWithoutFeedback> 
     <TouchableOpacity> 
      {this.renderButton()} 
     </TouchableOpacity> 
     <TouchableWithoutFeedback> 
); 
} 

renderButton() { 
    return <Text>Button</Text>; 
} 

Answer 1

您需要綁定renderRow功能是能夠在其中訪問this.renderButton。

<FlatList 
     data={list} 
     renderItem={this.renderRow.bind(this)} 
    /> 

或

<FlatList 
     data={list} 
     renderItem={() => this.renderRow()} 
    /> 

或

renderRow = ({item}) => { 
    return(
     <TouchableWithoutFeedback> 
     <TouchableOpacity> 
      {this.renderButton()} 
     </TouchableOpacity> 
     <TouchableWithoutFeedback> 
); 
}