Как получить значение DOM, в React (аналог querySelector(*).innerText)?

Question

[fun_code]

Пытаюсь изменить всего одну строчку расширения, которое уже работает и написано на react.
А именно, onClick, чтобы просто получал значение из h1, на сайте.

Я никогда не сталкивался с React, но мне нужно выполнить банальное:

let text = document.querySelector("h1.title").innerText;

И дальше уже этим значением оперировать уже внутри jsx. Я полный ноль в react.js, но нужно срочно сделать это обычное для jS действие.

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

Comments

[Вадим]

Конечное решение очень сильно зависит от того, какая у Вас структура компонентов и на что происходит клик.
Но, в целом, для этого есть 3 основных пути:
1) Если клик на самом заголовке, то через event.target
2) Если где-то в рамках компонента, в котором определён заголовок - то через ref.
3) Если где-то фиг знает где, то тут ветвление. Если в дочернем или дочернем-дочернем, то можно через события, иначе можно хранить значение заголовка h1 где-то в общей област видимости между еомпонентами, например в сторе или в react.context и по клику считывать оттуда. Либо через какую-то шину событий или EventEmitter. (тоже гуглится что это такое и как готовить)

Answer 1

[Alex Step]

Если действие происходит на клик пользователя - то этот код и вставить в обработчик клика.
Только сначала нужно убедиться что react после сборки проекта не подменяет классы элементов на автосгенерированные. Либо отключить эту опцию либо добавить тегу например data атрибуты и написать селектор по ним.