Vextor-ltd
@Vextor-ltd
Webdeveloper

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

Изучаю 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?
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Denioo
Потому что компонент обновляется сверху вниз, т.е когда ты обновляешь компонент сначала срабатывает строка
const menuBtn = document.querySelector('.btn');
console.log(menuBtn);

А потом грузится компонент, перенеси вниз строки если принципиально или вызывай в самом компоненте
function Header()
Ответ написан
Вам зачем получать елемент через селектор? Сейчас ваш код не имеет смысла, потому что Virtual DOM
В функциональных компонентах, если вам нужен доступ в реальный дом используют хук useRef
https://reactjs.org/docs/hooks-reference.html#useref
Ответ написан
@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;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы