Question

尝试将引用添加到Flatlist的子代时出现错误"Warning: Function components cannot be given refs. Attempts to access this ref will fail"。但是，这似乎只有在将引用添加到UserinfoGridComponent而不是View组件时才会发生。

从错误的角度来看，基本上我认为正在发生的事情是，正如错误所指出的那样，列表列表的子代被视为功能组件，因此无法接受引用。（但我很困惑，因为孩子有setState ...）

我真正需要的只是孩子（UserinfoGridComponent）内的ref，这样我就可以根据需要从UserinfoGridComponent组件中滚动平面列表。有没有办法让它工作？

父母：


class HomeScreen extends React.Component {
  displayType = ({ item, index }) => {

    const isBookmarked = (this.state.bookmarks.map(bookmark => bookmark.id).indexOf(item.id) !== -1)

    return (
      <View 
        ref={test => console.log("test ref 2", test)} 
        key={item.id} 
        style={[styles.shadowContainer, style={marginHorizontal: 15, marginBottom:25}]}>
        <UserinfoGridComponent
          ref={test => console.log("test ref 1", test)}
          checked={ isBookmarked }
          images={item.promoImages}
          firstImg={item.promoImages ? (item.promoImages[0] || null) : null}
          secondImg={item.promoImages ? (item.promoImages[1] || null) : null}
          avatar={item.avatar || ''}
          name={item.name || ''}
          mainSkill={User.extractSkill(item.skill)}
          secondarySkill={( item.otherSkills && item.otherSkills.length > 0 ) ? User.extractSkill(item.otherSkills[0]) : ''}
          city={item.location.locality}
          state={item.location.region}
          // key={index}
          index={index}
          user={item}
          onUserInfoPress={() => {
            this.props.navigation.navigate('Profile', { 
              user: item,
              clearAllFilters: this.clearAllFilters });
          }}
          onBookmarkPress={this.onBookmarkPress}
        />
      </View>
    )
  }


render() {

    const { creatorSearch } = this.props.data

    return (
      <View style={{flex:1, backgroundColor: 'white'}}>
        <Animated.View style={{ opacity: this.state.initialOpacityAnimation, flex: 1}}>
          <FlatList
            ref={(list) => { this.listRef = list }}
            contentInset={{top: 0, left: 0, bottom: 150, right: 0}}
            scrollIndicatorInsets={{top: 60, left: 0, bottom: 70, right: 0}}
            data={creatorSearch && this.state.initialContentLoaded ? creatorSearch.items : []}
            onEndReachedThreshold={0.3}
            onEndReached={() => this.scrollEnd()}
            ListHeaderComponent={this.listHeaderText}
            ListEmptyComponent={this.emptyListView}
            extraData={this.state.bookmarks.length}
            renderItem={this.displayType}
            scrollEventThrottle={1}
          />
        </Animated.View>
      </View>
    )
  }
}

孩子：

class UserInfoGridComponent extends React.Component {

constructor(props) {
    super(props)


    this.state = { 
      loadedUser: { media: { items: [] }},
      promoImages: this.props.user.promoImages
    }
  }

render() {

    const combinedImages = this.state.loadedUser.media.items.length > 0 ? this.state.loadedUser.media.items : this.state.promoImages

    return (
      <View>
       <FlatList
        ref={ref => console.log("THIS IS A TEST", test)}
        horizontal={true}
        data={combinedImages}
        renderItem={this.imageDisplay}
        style={{padding:imageMargin*2}}
        showsHorizontalScrollIndicator={false}
       />
      </View>
}

Answer 1

引用应分配为ref={(ref) => this._flatlist = ref}

，您可以使用this._flatlist

Flatlist的孩子说“不能给功能组件提供引用。”

1 个答案: