React - использование «документа» внутри компонента
Если у меня есть презентационный (дочерний) компонент со следующей строкой:
<small id = "parameters"> some parameters text </small>
Я заметил, что если я перейду к его родительскому компоненту контейнера и попытаюсь получить этот элемент:
const textElem = document.getElementById('parameters').value;
Это не получит своей ценности.
Это почему? Если я использую document в компоненте, является ли он «локальным» для этого компонента?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать document внутри компонента, чтобы ссылаться на глобальный объект document, он не является локальным для этого компонента, однако в момент, когда вы ссылаетесь на document.getElementById('parameters'), этот элемент, возможно, еще не был отрисован в dom, поэтому обязательно вызовите его после рендеринга дочернего элемента.
С другой стороны, возможно, вы хотели использовать: document.getElementById('parameters').innerHTML
чтобы получить текст внутри этого элемента вместо .value
Да, дочерний элемент отрисован. Могу ли я тогда использовать textElem.select();? Потому что в настоящее время по какой-то причине это не работает.
вы пробовали document.getElementById ('parameters'). innerHTML?
также document.getElementById ('parameters'). innerText
Да, у меня HTMLUnknownElement, что странно, потому что я просматриваю этот дочерний компонент, поэтому он был четко визуализирован ...
Тот факт, что вы его просматриваете, не обязательно означает, что он уже отрисован к тому моменту, когда вы ссылаетесь на него в коде.
В этом случае вы можете рассмотреть ссылка, особенно для чего-то вроде select(), focus() и т. д. Имейте в виду, что Выбрать() предназначен для ввода, такого как текст.
@rubentd у меня есть функция copyParams, в которой живет этот код. Он определен в компоненте контейнера и передается дочернему props. При нажатии кнопки Copy в дочернем компоненте он вызывает эту функцию, которая выполняет этот код, и я получаю HTMLUnknownElement только после нажатия этой кнопки Copy, так почему же он еще не был отрисован?
Понятно ... В этом случае можно с уверенностью предположить, что элемент уже отрисован.
Не уверены, в чем проблема, есть ли вероятность, что вы поделитесь более подходящим кодом для этого компонента?
да, вы можете сделать это в
componentDidMount()или вuseEffect()