Блог

Главная - Вопросы по программированию - Использование querySelector в React

Использование querySelector в React

#javascript #reactjs #dom

#javascript #reactjs #dom

Вопрос:

querySelector возвращает null (возможно, потому, что элемент не создан), я попробовал событие DOMContentLoaded и ReactDOM.findDOMNode 

 const Header = () => {
  const links = document.querySelector('.header_links')
    window.addEventListener('resize',() => {
      if(window.innerWidth <=1000 ){
        links.classList.remove('hide');
      }
    })
  return (
      <header className="App-header">
        <div className="inner-header">
          <div className="header_links">
          <div className="header_left_links">
            <a href="index.html" className="active">DrukBox</a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
          </div>
          <BurgerMenu />
        </div>
      </header>
  );
}

Комментарии:

1. Я не вижу элемента с class header-links в вашем JSX. И попробуйте использовать hook useRef вместо querySelector .

Ответ №1:

Вы используете dash(-) вместо underscore(_) .

Ваш HTML-JSX содержит подчеркивание.

 <div className="header_links">

пока ваш querySelector содержит тире.

 const links = document.querySelector('.header-links')

Измените его на underscore .

Также я согласен с @Alexandr, с вами useRef , если это возможно.

 const Header = () => {
  const refHeaderLink = useRef(null);
  
    window.addEventListener('resize',() => {
      if(window.innerWidth <=1000 ){
        refHeaderLink.current.classList.remove('hide');
      }
    })
  return (
      <header className="App-header">
        <div className="inner-header">
          <div className="header_links" ref={refHeaderLink}>
          <div className="header_left_links">
            <a href="index.html" className="active">DrukBox</a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
          </div>
          <BurgerMenu />
        </div>
      </header>
  );
}

Комментарии:

1. Спасибо! Я отредактировал тире, чтобы подчеркнуть, но это не решило мою проблему

2. @Alexandr, также я просто новичок в этом, если что-то не так, вы можете отредактировать ответ.

3. @JitendraYadav В вашем коде важна только одна вещь: при каждом рендеринге Header компонента будет добавляться новый прослушиватель событий. Вы должны очистить лишние. См. Документы reactjs.org/docs/hooks-effect.html#effects-with-cleanup

Ответ №2:

Или вы можете использовать состояние без ссылок.

 const Header = () => {
  const [isHiddenLinks, setIsHiddenLink] = React.useState(true);

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 1000) {
        setIsHiddenLink(false);
      }
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [isHiddenLinks]);

  return (
    <header className="App-header">
      <div className="inner-header">
        <div className={`header_links ${isHiddenLinks ? "hide" : ""}`}>
          <div className="header_left_links">
            <a href="index.html" className="active">
              DrukBox
            </a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
        </div>

        <BurgerMenu />
      </div>
    </header>
  );
};

Комментарии:

1. И не забудьте добавить removeEventListener

2. Спасибо, но я совершенно не знаю, как это работает ((( мне нужно прочитать документацию

3. Это нормально! Но прочитайте документацию reactjs.org/docs/hooks-effect.html#effects-with-cleanup и попытайся понять. Удачи в учебе! 😉