Question

我正在这样调用<SearchableList>组件

<SearchableList
    pullToRefresh=""
    items={groupStates}
    searchFields={groupStateSearchFields}
    searchTemplate={() => <GroupStateSearchEntry />}
    itemTemplate={x => <GroupStateItem key={x.groupName} groupState={x} />} />

在这样的地方

<SearchableList
    items={items}
    searchFields={searchFields}
    searchTemplate={() => <SearchEntry />}
    pullToRefresh="conversations"
    itemTemplate={item => <ConversationItem key={item.id} item={item}
        isSelected={this.state.isArchiving && this.state.selectedConversations.indexOf(item.id) >= 0}
        onPressItem={this.pressItem} onLongPressItem={this.longPressItem} accountTimeZone={this.store.accountTimeZone} />} />

如您所见，我正在传递属性PullToRefresh。它可以是空白，也可以是“对话”。在我的组件中，我像这样检查它

<ScrollView 
    ref={(ref) => this._refScrollView = ref}
    onContentSizeChange={this.scrollToEnd}
    refreshControl={
        (pullToRefresh == 'conversations') &&
        <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
        />
}>
    {!this.state.isBusy && !this.state.items.length && (
        <View>
            {!!blankItemTemplate && blankItemTemplate() || <BlankItem />}
        </View>
    )}
    {!!this.state.items.length && (
        <List items={this.state.items} itemTemplate={itemTemplate} />
    )}
</ScrollView>

但是，只要我的“ PullToRefresh”在此处为“”，我都会收到此错误

refreshControl={
    (pullToRefresh == 'conversations') &&
    <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh.bind(this)}
    />
}

请参阅此链接以供参考

http://prntscr.com/jxgd3k

Answer 1

您的代码的问题在这里

refreshControl={
    (pullToRefresh == 'conversations') &&
    <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh.bind(this)}
    />
}

如果 pullToRefresh 值为“” ，则 refreshControl 的值为 false ，因为它没有默认值，因此该语句的值为false，并且 ScrollView 期望React元素不是布尔值，因此您需要更改代码，因此refeshControl应该具有默认值，可以在if语句的返回值之前使用if语句。渲染功能到这样的

const refreshControl = <span>here your default value</span>;
if (pullToRefresh === 'conversations') {
    refreshControl = (
        <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
        />
    );
}

现在refreshControl具有默认值，您应该基于ScrollView组件以我的示例为参考来修改代码

Answer 2

如果pullToRefresh！='conversations'无法呈现，则使用&&传递false。如果没有要渲染的内容，则传递null

   (pullToRefresh == 'conversations') ?
         <RefreshControl refreshing={this.state.refreshing} onRefresh=this._onRefresh.bind(this)} />:null

根据给出警告的属性传递属性

2 个答案: