Question

我想知道是否有一种方法可以基于条件为列表组件设置一组属性。

render() {
  return (
    <SectionList
      ref={(ref) => {this.listRef = ref}}
      style={styles.listContainer}
      sections={this.props.listData}
      fetchData={this.props.fetchData}
      keyExtractor={this.keyExtractor}
      renderSectionHeader={this.renderSectionHeader}
      renderItem={this.renderItem}
      ItemSeparatorComponent={this.separator}
      keyboardDismissMode='on-drag'
      initialNumToRender={6}
      stickySectionHeadersEnabled={false}
      // ListFooterComponent={this.renderFooter}
      // onEndReachedThreshold={0.5}
      // onEndReached={() => {
      //   this.props.fetchMoreData()}}
    />
  )
}

仅在设置了ListFooterComponent的情况下才希望设置onEndReachedThreshold，onEndReached和this.props.fetchMoreData。我是否需要将if语句放在render函数的顶部，或者是否可以创建一个单独的prop来对这3个对象进行分组，并使用散布运算符根据条件将其放回SectionList中。我不太确定该怎么做。

Answer 1

我得出以下结论

  render() {
    optional = {}
    if (this.props.fetchMoreData) {
      optional.onEndReachedThreshold = 0.5
      optional.onEndReached = () => {
        this.props.fetchMoreData()}
      optional.ListFooterComponent = this.renderFooter
    }
    return (
      <SectionList
        ref={(ref) => {this.listRef = ref}}
        style={styles.listContainer}
        sections={this.props.listData}
        fetchData={this.props.fetchData}
        keyExtractor={this.keyExtractor}
        renderSectionHeader={this.renderSectionHeader}
        renderItem={this.renderItem}
        ItemSeparatorComponent={this.separator}
        keyboardDismissMode='on-drag'
        initialNumToRender={6}
        stickySectionHeadersEnabled={false}
        {...optional}
      />
    )

我认为我最初是在optional.ListFooterComponent上摔倒了。在我看来，这很奇怪，所以我认为这一定是错误的；）

React Native：List的条件道具

1 个答案: