React Native ref to element не определен в элементе плоского списка

Я пытаюсь получить ссылку на элемент при рендеринге плоского списка, но ссылка возвращается как неопределенная. См. соответствующий код ниже:

Конструктор:

constructor(props) {
    super(props);

    this.modalRef = createRef();
}

Объект Рендеринга:

_renderItem = ({ item }, context) => {
    const modalRef = context.modalRef.current; // Why is context.modalRef.current null?
    let onPress = () => alert("Something went wrong...");

    return (
        <View style = {styles.item}>
            <ListItemCard
                id = {item.id}
                value = "Some value.."
                onPress = {onPress()}
            />
        </View>
    );
};

В функции рендеринга:

Модальное на экране:

    <Modal
    ref = {this.modalRef}
    text = "Some text.."
    onPressClose = {() =>
        this.modalRef.current.close()
    }
/>

Плоский список:

  <FlatList
    data = {data}
    renderItem = {item => this._renderItem(item, this)}
    keyExtractor = {(item, index) => index.toString()}
/>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
803
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

modalRef.current — это null, потому что ссылка назначается при монтировании компонента Modal. Я предполагаю, что компонент не смонтирован во время вызова функции _renderItems.

Я рекомендую вам использовать ref внутри функции, которая не отображает компонент, например обработчик событий. Там переменная ref должна иметь ссылку на компонент.

Первый фрагмент имеет смысл, но можете ли вы расширить то, что вы подразумеваете под вторым абзацем?

Imdad 10.05.2019 11:17

@Imdad Я обновил свой ответ и попытался немного его прояснить.

Rallen 10.05.2019 11:22

Понял тебя! Это имеет смысл. Спасибо!

Imdad 10.05.2019 11:24

Другие вопросы по теме