React Native: условные реквизиты для списка - PullRequest
Новая
       13

React Native: условные реквизиты для списка

0 голосов
/ 02 июля 2018

Мне было интересно, есть ли способ установить группу свойств для компонента списка на основе условия. 

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 в верхней части функции рендеринга или можно создать отдельный объект для группировки этих 3 и использовать оператор распространения, чтобы вернуть его обратно в SectionList на основе условия. Я не совсем уверен, как это сделать.

1 Ответ

0 голосов
/ 02 июля 2018

Я получил следующее 

  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. Мне это показалось странным, поэтому я предположил, что это неправильно;)

...