React. Почему элемент в компоненте становится пустым?

Question

[Влад]

Изучаю React.

import './Header.scss';
import React from 'react';

const menuBtn = document.querySelector('.btn');
console.log(menuBtn);

function Header() {
  return (
    <>
      <div className="menu">
        <div className="btn">
        {/* ... */}
      </div>
    </>
  );
}

export default Header;

Почему когда пишешь строки

const menuBtn = document.querySelector('.btn');
console.log(menuBtn);

и сохраняешь файл компонента, то в консоле выводится данный объект, однако при обновлении через F5 элемент menuBtn становится null?

Comments

[Иван В]

Какую цель должен выполнять этот код?
В комментариях вы пишите, что изучаете React, но зачем-то пытаетесь решать задачи старыми средствами.

Answer 1

[Denioo]

Потому что компонент обновляется сверху вниз, т.е когда ты обновляешь компонент сначала срабатывает строка

const menuBtn = document.querySelector('.btn');
console.log(menuBtn);

А потом грузится компонент, перенеси вниз строки если принципиально или вызывай в самом компоненте
function Header()

Comments

[Влад]

Не могу понять следующее.. Вот у меня есть проверенный временем готовый написанный мной код на нативном JS без всяких React заморочек типа рефов и стейтов, где обращение к элементам происходит через querySelector(), ну и так далее всё на нативе, как правильно использовать такой код в компоненте React? И вообще правильно ли это? Как вообще все свои наработанные нативные библиотеки грамотно подключать с React?

[Влад]

Владимир,

У меня почему-то, когда я пытаюсь использовать рефы, происходит аналогичная ситуация!

import './Header.scss';
import React from 'react';

function Header() {
  let menu = React.createRef();
  let menuBtn = React.createRef();
  let hamburgerMenu = React.createRef();
  
  console.log('menuBtn: ', menuBtn);

  return (
    <>
      <div className="menu" ref={ menu }>
        <div className="hamburger-wrapper" ref={ menuBtn }>
          <div className="hamburger-menu" ref={ hamburgerMenu }></div>
        </div>
       { /* ... */}

В консоле получаю:

menu:  Object { current: null } Header.js:11
menuBtn:  Object { current: null }Header.js:12
hamburgerMenu:  Object { current: null }

[Denioo]

Влад,

обращение к элементам происходит через querySelector()

В реакте это в корне неправильно.
Ваша проблема в данном случае то что вы используете createRef() вместо useRef(). createRef() взвращает всегда новый ref.
Используйте:
const ref = useRef(null)
Подробнее https://ru.reactjs.org/docs/hooks-reference.html#useref

Answer 2

[Владимир]

Вам зачем получать елемент через селектор? Сейчас ваш код не имеет смысла, потому что Virtual DOM
В функциональных компонентах, если вам нужен доступ в реальный дом используют хук useRef
https://reactjs.org/docs/hooks-reference.html#useref

Comments

[Влад]

Второй день изучаю React. Сейчас уже каша в голове. Про то, что я не могу понять, я написал в сообщении предыдущему комментатору.

[Владимир]

Влад, почитайте официальную документацию. Погуглите доп статьи про using real dom in react. В реакте виртуальный дом и поэтомы вы можете потерять ссылку на елемент, который нашли селекторами.
https://codesandbox.io/s/strange-mirzakhani-z0r11?...
Ну и про ефект с очисткой почитай, чтобы чистить ивент хендлеры на старых елементах

[Влад]

Владимир, пока что я никак не могу понять зачем нужен весь этот геморрой, если компонентного подхода я легко могу добиться, используя тот же Gulp или Webpack, где будет использован нормальный человеческий DOM без всего этого ужаса, где я подключаю абсолютно любую библиотеку и она работает!

[Владимир]

Влад, Вы хотите чтобы вам тут ответили на философский вопрос? Вы можете использовать любой подход, который вам нравится.

Answer 3

[Buck]

как вариант

class Header extends React.Component {

  componentDidMount() {
    const menuBtn = document.querySelector('.btn');
   console.log(menuBtn);
  }

  render() {  
    return (
    <>
      <div className="menu">
        <div className="btn">
        {/* ... */}
      </div>
    </>
    )
  }
}
export default Header;

Comments

[Влад]

Это что-то связанное с жизнью компонента? Меня очень интересует вопрос каким образом скрипты, написанные для работы с реальным DOM, использовать в React! Я взял новый проект и решил сразу обкатать его на React, благо не горит, и есть возможность практиковаться. Я бы выполнил это проект за неделю, пользуясь старыми добрыми системами сборки типа Gulp или Webpack, а может и Parcel, чтоб не сильно морочиться. Но я решил восполнить пробел, связанный с React, но кажется, что простым нахрапом его не возьмёшь ))
В общем.. Как свои старые обкатанные скрипты интегрировать в React?

[Buck]

Влад, Да. Он не может найти document.querySelector('.btn');
так как его еще нет на странице.

Поэтому можно сделать class и в

componentDidMount() {
// поместить сюда старый скрипт, который относится к этому компоненту
}

[Влад]

Buck, А как импортировать скрипты, работающие с реальным DOM? Что-то в инете какая-то разрозненная инфа, обобщить которую и сделать выводы очень сложно.

[Влад]

Вообще, происходит куча непонятной мне ерунды. У меня вообще гамбургер уехал за пределы штатного скрол-бара.


Пожалуй, сделаю я проект по-старинке, а параллельно буду осваивать React. Не получится так сходу. В результате не преуспею ни там, ни там.

[Buck]

Влад, Ну вообще в реакте это неправильно.
Нельзя лезть в DOM правильно работать с Virtual DOM
А document.* мы обращаемся напрямую, а уже реакт контролирует отрисовку DOM