当 SectionList 组件中的部分为空时呈现“无内容"组件 [英] Render 'no content' component when section in SectionList component is empty

问题描述

见https://facebook.github.io/react-native/docs/sectionlist.html

当 Section 中的一个为空时(例如 data prop 是一个空数组)，我仍然想渲染 SectionHeader，但也渲染一个指示该部分不包含数据的组件.

When one of the Section's is empty (e.a. the data prop is an empty array), I would still like to render the SectionHeader, but also render a component that indicates that the section contains no data.

我知道对于 FlatList 组件，可以使用 ListEmptyComponent 属性，但是这对 SectionList 组件有何作用?

I know for the FlatList component this is possible using the ListEmptyComponent prop, but how does this work for the SectionList component?

我希望有这样的东西(但它不起作用):

I was hoping for something like this (but it doesn't work):

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

推荐答案

您可以使用 renderSectionFooter 来显示任何无内容"组件.看看下面的小例子:

You could use the renderSectionFooter to display any 'no content' component. Check out the following little example:

<SectionList
   renderSectionFooter={this.renderNoContent}
   section={[
      {data: ['1', '2']},
      {data: []}
   ]}
/>

renderNoContent = ({section}) => {
   if(section.data.length == 0){
      return NO_CONTENT_COMPONENT
   }
   return null
}

这篇关于当 SectionList 组件中的部分为空时呈现“无内容"组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！