无法添加函数来在renderItem FlatList中创建动态按钮

Question

我正在尝试添加一个函数来根据renderItem FlatList组件中的状态返回按钮文本。

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

<TouchableWithoutFeedback>
    <TouchableOpacity>
        {this.renderButton()}
    </TouchableOpacity>
<TouchableWithoutFeedback>

此代码返回错误

  

函数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>
  );
}