Я всегда предполагал, что ссылки в 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, но, похоже, они этого не описывают, поэтому я пришел сюда.
Действительно, ОП определенно делает что-то действительно странное, но как только у вас есть ссылка на узел DOM, вы можете innerHTML = ‘’
к радости своего сердца.
Ответ на этот вопрос в документации, так что, возможно, вы нашли не ту страницу или что-то в этом роде.
@Адам Дженкинс, в документации обсуждается использование ref
после того, как вы передали его компоненту, но я спрашиваю о том, что происходит, когда вы передаете его компоненту. Опять же, вы можете буквально использовать <span ref = {someRef}>abc</span>
, а содержимое someRef
может привести к тому, что «abc» не будет отображаться; это не имеет ничего общего с использованием ref.current.whateverDomMethod
после рендеринга компонента.
@NicholasTower Рассматриваемый код непросто суммировать (ref
передается через несколько компонентов), но я попытаюсь сделать базовое воспроизведение.
Что ж, после небольшой отладки у меня все еще нет чистого воспроизведения, но из журналов я вижу, что компонент изначально отображается правильно, поэтому должно быть так, что какая-то логика выше меняет ref
. Это делает ваш ответ идеальным, спасибо!
что передача ссылки в компонент на самом деле делает с самим компонентом?
Если вы передадите объект ref (объект со свойством .current
), то реакция назначит элемент dom .current
и больше ничего не сделает.
Если вы передадите функцию ref, то реакция вызовет эту функцию и передаст элемент dom. В принципе, эта функция может делать что угодно, поэтому, если вы напишете странную функцию, вы можете стереть содержимое элемента. Но чаще всего вы просто присваиваете элемент какому-то свойству какого-то объекта, очень похоже на то, что реакция автоматически делает с объектом ref.
В частности, как содержимое ссылки может повлиять на рендеринг компонента?
Единственный способ сделать это — написать код, изменяющий элемент. Изначально рефери полностью пассивен.
The passed-in ref can actually make React not render the child ('abc' in my example) of the <span>.
Если вы не сделаете что-то действительно странное со ссылкой в родительском компоненте, этого не произойдет. Можете ли вы показать пример кода, демонстрирующего такое поведение? Вот пример, который не показывает поведение: codeandbox.io/p/sandbox/…