React Native:List 的条件属性

Question

我想知道是否有办法根据条件为列表组件设置一组属性。

render() {
return (
<SectionList
ref={(ref) => {this.listRef = ref}}
style={styles.listContainer}
sections={this.props.listData}
fetchData={this.props.fetchData}
keyExtractor={this.keyExtractor}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={this.separator}
keyboardDismissMode='on-drag'
initialNumToRender={6}
stickySectionHeadersEnabled={false}
// ListFooterComponent={this.renderFooter}
// onEndReachedThreshold={0.5}
// onEndReached={() => {
//   this.props.fetchMoreData()}}
/>
)
}

我希望ListFooterComponent，onEndReachedThreshold和onEndReached只有在设置this.props.fetchMoreData时才设置。我是否需要在渲染函数的顶部放置一个 if 语句，或者是否可以创建一个单独的 prop 来对这 3 个进行分组，并根据条件使用 spread 运算符将其放回 SectionList 中。我不太确定该怎么做。

Answer 1

我最终得到了以下内容

render() {
optional = {}
if (this.props.fetchMoreData) {
optional.onEndReachedThreshold = 0.5
optional.onEndReached = () => {
this.props.fetchMoreData()}
optional.ListFooterComponent = this.renderFooter
}
return (
<SectionList
ref={(ref) => {this.listRef = ref}}
style={styles.listContainer}
sections={this.props.listData}
fetchData={this.props.fetchData}
keyExtractor={this.keyExtractor}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={this.separator}
keyboardDismissMode='on-drag'
initialNumToRender={6}
stickySectionHeadersEnabled={false}
{...optional}
/>
)

我想我最初被optional.ListFooterComponent绊倒了.这对我来说看起来很奇怪，所以我认为它一定是错误的;)