react-native - 我可以在平面列表中使用 ItemSeparatorComponent 中的组件吗？

Question

我在想怎么用ItemSeparatorComponent在平面列表中

如果我使用它会起作用:

import Seperator from '../Seperator';

        <FlatList
          ItemSeparatorComponent={() => <Seperator />}
          data={this.props.x}
          renderItem={({ item }) => this.renderX(item)}
        />

我可以只使用 <Seperator /> 吗？像下面这样？

import Seperator from '../Seperator';

           <FlatList
              ItemSeparatorComponent={ <Seperator />}
              data={this.props.x}
              renderItem={({ item }) => this.renderX(item)}
            />

没用!为什么？

Answer 1

原因() => <Separator />作品和<Separator />不是因为ItemSeparatorComponent需要一个呈现元素的函数，而不是元素本身。

这是因为您指定为分隔符的组件会在填充列表时动态呈现，而不是就地呈现(这是 <Component /> 语法的作用)。

在您的工作示例中，您使用的是 () => <Separator /> .除非您使用的是类组件，否则这是多余的，因为您的代码在这种情况下所做的只是创建一个匿名函数，然后呈现您的组件。如果您使用的是无状态功能组件(人们希望它只是一个分隔符)，您可以将其写为 ItemSeparatorComponent={Separator}