Что делает передача ссылки на компонент элемента в React?

Я всегда предполагал, что ссылки в React — это однонаправленные ссылки. Другими словами, я подумал, что если бы я это сделал:

const SomeComponent = () => {
  const ref = useRef();
  return <span ref = {ref}>abc</span>
}

ref вообще не окажет никакого влияния на <span>; это просто позволило бы SomeComponent получить доступ к элементу DOM <span>.

Однако недавно я обнаружил, что это не так: ссылка может фактически повлиять на элемент, в который она передана. В небольшой вариации вышеизложенного, где я передал ref:

const SomeComponent = forwardRef((props, ref) => {
  return <span ref = {ref}>abc</span>
});

Переданный ref на самом деле может заставить React не отображать дочерний элемент ('abc' в моем примере) <span>. Все работает нормально (ошибок нет), но рендерится как <span></span>.

Что на самом деле делает передача ref в компонент с самим компонентом? В частности, как содержимое ref может повлиять на рендеринг компонента?

Я пробовал читать документацию по React, но, похоже, они этого не описывают, поэтому я пришел сюда.

The passed-in ref can actually make React not render the child ('abc' in my example) of the <span>. Если вы не сделаете что-то действительно странное со ссылкой в ​​родительском компоненте, этого не произойдет. Можете ли вы показать пример кода, демонстрирующего такое поведение? Вот пример, который не показывает поведение: codeandbox.io/p/sandbox/…
Nicholas Tower 20.05.2024 23:59

Действительно, ОП определенно делает что-то действительно странное, но как только у вас есть ссылка на узел DOM, вы можете innerHTML = ‘’ к радости своего сердца.

Adam Jenkins 21.05.2024 00:00

Ответ на этот вопрос в документации, так что, возможно, вы нашли не ту страницу или что-то в этом роде.

Adam Jenkins 21.05.2024 00:01

@Адам Дженкинс, в документации обсуждается использование ref после того, как вы передали его компоненту, но я спрашиваю о том, что происходит, когда вы передаете его компоненту. Опять же, вы можете буквально использовать <span ref = {someRef}>abc</span>, а содержимое someRef может привести к тому, что «abc» не будет отображаться; это не имеет ничего общего с использованием ref.current.whateverDomMethod после рендеринга компонента.

machineghost 21.05.2024 00:12

@NicholasTower Рассматриваемый код непросто суммировать (ref передается через несколько компонентов), но я попытаюсь сделать базовое воспроизведение.

machineghost 21.05.2024 00:14

Что ж, после небольшой отладки у меня все еще нет чистого воспроизведения, но из журналов я вижу, что компонент изначально отображается правильно, поэтому должно быть так, что какая-то логика выше меняет ref. Это делает ваш ответ идеальным, спасибо!

machineghost 21.05.2024 00:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
6
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

что передача ссылки в компонент на самом деле делает с самим компонентом?

Если вы передадите объект ref (объект со свойством .current), то реакция назначит элемент dom .current и больше ничего не сделает.

Если вы передадите функцию ref, то реакция вызовет эту функцию и передаст элемент dom. В принципе, эта функция может делать что угодно, поэтому, если вы напишете странную функцию, вы можете стереть содержимое элемента. Но чаще всего вы просто присваиваете элемент какому-то свойству какого-то объекта, очень похоже на то, что реакция автоматически делает с объектом ref.

В частности, как содержимое ссылки может повлиять на рендеринг компонента?

Единственный способ сделать это — написать код, изменяющий элемент. Изначально рефери полностью пассивен.

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