[英]Can I use component in ItemSeparatorComponent in 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)}
/>
它不起作用! 为什么?
() => <Separator />
有效而<Separator />
无效的原因是因为ItemSeparatorComponent
需要一个呈现元素的函数,而不是元素本身。
这是因为您指定为分隔符的组件是在填充列表时动态呈现的,而不是就地呈现(这是<Component />
语法所做的)。
在您的工作示例中,您使用() => <Separator />
。 除非您使用类组件,否则这是多余的,因为在这种情况下您的代码所做的只是创建一个匿名函数,然后呈现您的组件。 假设您使用的是无状态函数组件(人们希望它只是一个分隔符),您可以将其写为ItemSeparatorComponent={Separator}
如果<Separator/>
是无生命周期方法的无状态组件,则可以将其更改为如下功能组件:
import React from 'react'
import {View} from 'react-native'
const Separator= (props) =>
<Text>{...}</Text>
export default Separator
这样,您不需要明确的回报。 如果坚持使用类组件(使用状态,生命周期方法或渲染...),则需要使用箭头函数(隐式返回)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.