Компонентам функций не могут быть присвоены ссылки

#react-native #react-functional-component #create-ref

#реагировать-родной #реагирующий-функциональный-компонент #создать-ссылка

Вопрос:

У меня есть следующая проблема:

У меня есть ActionWeekModal, который содержит мой собственный пользовательский компонент под названием MList. Внутри этого MList находится SwipeListView. Я хочу использовать ссылку на SwipeListView в ActionWeekModal для запуска функции scrollToEnd(). Это должно быть возможно из-за того, что SwipeListView унаследовал эту функцию от FlatList. Однако ошибка, которую я получаю, заключается в следующем:

 warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Но я использую React.forwardRef() в MList.js . Что я делаю не так?

ActionweekModal.js

 import React, { useState, useRef } from 'react'
{ ... }

export default function ActionWeekModal({ navigation, route }) {
  const mlist = React.createRef()

  { ... }

  const scroll = () => {
    mlist.current.scrollToEnd()
  }

  return (
    <MModal
      isVisible={true}
      onBackdropPress={() => NavigationService.goBack()}
      onCancel={() => NavigationService.goBack()}
      title="Actieweek"
    >
      <Button title={'button'} onPress={() => scroll()} />
      <ScrollView>
        <MList
          keyExtractor={keyExtractor}
          data={actionWeeks}
          refreshing={isFetching}
          renderItem={renderItem}
          ref={mlist}
          initialNumToRender={15}
          onEndReached={() => {
            if (hasNextPage) {
              fetchNextPage()
            }
          }}
          onEndReachedThreshold={0.2}
        />
      </ScrollView>
    </MModal>
  )
}

MList.js

 import React from 'react'
{ ... }

const MList = React.forwardRef((props, ref) => (
  <View style={ApplicationStyles.screen}>
    <SwipeListView
      style={ApplicationStyles.flatListContainer}
      data={props.data}
      ref={ref}
      initialNumToRender={props.initialNumToRender}
      keyExtractor={props.keyExtractor}
      renderItem={props.renderItem}
      onEndReached={props.onEndReached}
      onEndReachedThreshold={props.onEndReachedThreshold ?? 1}
      closeOnRowOpen
      closeOnRowPress={true}
      closeOnRowBeginSwipe
      disableRightSwipe
      {...props}
    />
  </View>
))

export default MList

Ответ №1:

Как указано в документации, вам необходимо изменить ref listViewRef , чтобы получить ссылку на SwipeListView .