我可以在平面列表中使用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期望呈现元素的 function 而不是元素本身。

这是因为您指定为分离器的组件是在列表被填充时动态渲染的，而不是将其渲染到位（这是<Component />语法所做的）。

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

Answer 2

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

import React from 'react'
import {View} from 'react-native'
const Separator= (props) =>
  <Text>{...}</Text>
export default Separator

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