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

Question

我在考虑如何在Flat列表中使用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

这样做，您不需要显式返回。如果坚持使用类组件（使用state，lifecycle-methods或render ...），则需要使用箭头函数（隐式返回）。