当SectionList组件中的部分为空时,渲染"无内容"组件

Question

请参阅https://facebook.github.io/react-native/docs/sectionlist.html

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

我知道对于FlatList组件,这可以使用ListEmptyComponent prop,但是这对SectionList组件有什么作用？

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

<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
      }
    ]}
  />

Answer 1

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

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

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

Answer 2

I'm little late for the party, but since I just had to do this and I wasted a little more time on it than I'm comfortable admitting, I'll try to wrap everything up.

You can't use SectionList's ListEmptyComponent to achieve this as you do with the FlatList component. ListEmptyComponentis only triggered when the data prop is empty. If however you have any section in the data prop, then ListEmptyComponent won't be triggered.

One of the replies suggests using renderItem and checking inside of it whether section.data.length equals 0. That's nice idea, except that renderItem won't be called for sections that have data.length === 0. So this approach won't work.

What you are left with is either using renderSectionHeaderor renderSectionFooter - which one you decide to use is up to you and your specific use case.

The renderSection*function receives the section and there you are able to check whether the section has a data prop with length > 0. If it doesn't this would be your chance to output an EmptyComponent.

With the specific example in the question it would look something like this:

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => {
      if (section.data.length === 0) {
        return section.ListEmptyComponent     
      }
      return <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
      }
    ]}
  />

Answer 3

应该以完全相同的方式工作，我相信：listEmptyComponent

或者，您也可以在 JSX 中执行条件来呈现没有数据的消息