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/>是没有生命周期方法的无状态组件，则可以将其更改为如下功能组件：

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

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

export default Separator

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

Answer 2

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

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

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

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

2 个答案: