我可以在平面列表中使用 ItemSeparatorComponent 中的组件吗？答案

【问题标题】：Can I use component in ItemSeparatorComponent in flat list?我可以在平面列表中使用 ItemSeparatorComponent 中的组件吗？
【发布时间】：2019-02-27 09:07:43
【问题描述】：

我正在考虑如何在 Flat list 中使用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)}
            />

这行不通！为什么？

【问题讨论】：

标签： react-native separator react-native-flatlist

【解决方案1】：

() => <Separator /> 有效而 <Separator /> 无效的原因是，ItemSeparatorComponent 需要一个函数来呈现元素，而不是元素本身。

这是因为您指定为分隔符的组件是在填充列表时动态呈现的，而不是在原地呈现（<Component /> 语法就是这样做的）。

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

【讨论】：

【解决方案2】：

如果您的<Separator/> 是一个没有生命周期方法的无状态组件，您可以将它们更改为这样的功能组件：

import React from 'react'
import {View} from 'react-native'

const Separator= (props) =>
  <Text>{...}</Text>

export default Separator

这样做，您不需要显式返回。如果您坚持使用类组件（使用状态、生命周期方法或渲染...），则需要使用箭头函数（隐式返回）。

【讨论】：