Как получить HTML-элемент с помощью useRef (реакция/хуки)
Попытка использовать хук useRef для функционального компонента. Я получаю: {current: null}, когда пытаюсь вывести это на консоль. Любая вещь выглядит здесь?
import React, {useRef} from 'react';
const Hi = () => (
const span = useRef<HTMLSpanElement>(null);
console.info(span);
return(
<div>
<p>hi</p>
</div>
)
);
export default Hi;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
0
0
151
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
useRef не создает элемент HTML; скорее, вам нужно прикрепить полученную ссылку к соответствующему элементу JSX (написав, например, <span ref = {span} />), а затем React обновит ссылку, чтобы она указывала на соответствующий узел элемента или компонент.
Это означает две вещи:
- Вам необходимо включить соответствующий элемент JSX в возвращаемое значение вашей функции компонента.
- Даже после того, как вы это сделаете, вы не сможете использовать ref внутри самой функции компонента (по крайней мере, при первом ее вызове), потому что узел элемента еще не создан. Вместо этого ссылка доступна для использования в обработчиках событий, эффектах и так далее.
Для получения дополнительной информации см. https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref
Ответ принят как подходящий
const pRef = useRef(null);
useEffect(() => {
console.info(pRef.current);
}, []);
return <p ref = {pRef}>hi</p>;
Другие вопросы по теме
Есть ли способ установить позицию компонента React в его функции (например, по идентификатору позиции)?
При обновлении параметров поиска с помощью хука useSearchParams загружается предыдущая страница, как предотвратить это?
Обновить строку таблицы реакции с данными поля ввода модального окна - Таблица реакции
Почему ленивая загрузка не работает в моем проекте реакции?
LocalStorage не определен в следующем js
Тестирование компонента реакции, который использует параметры поиска в URL-адресе
Console.infos в onClick handleSubmit не распечатываются
Зачем в React нужны фигурные скобки при передаче реквизита в качестве аргумента компоненту?
Компонент React не выполняет повторный рендеринг из-за изменения состояния Redux
Почему тип параметров автозаполнения MUI не может быть A[] | Б[]
Похожие вопросы
Недопустимое свойство всегда ложно при первом рендеринге, реагирующая форма 7
Как сбросить дочерний компонент React из родительского компонента React?
Показывать только некоторые столбцы в таблице реакций на основе определенных условий
Компонент, установленный в двух точках
Ответ на получение асинхронного API не сохраняется в хуке UseState
Глобальные CSS-анимации Next.js
POST http://localhost:3000/add 404 (не найдено) Неперехвачено (в обещании) Ошибка: запрос не выполнен с кодом состояния 404
Элемент JSX исчезает после обновления с использованием хука useState()
Есть ли предлагаемый способ организовать несколько условных рендерингов в одном и том же «возврате» в React?
Axios выдает ошибку, когда я пытаюсь получить данные из Strapi
Пожалуйста, объясните свой ответ, чтобы сделать его лучше