React 初学者。我的 NavBar 给出错误“Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') i can't seem to tell why.”

问题描述 投票：0回答：2

我尝试创建并使用动画汉堡包菜单图标，而不是为我的 Navbar 组件制作的图标



`const menu = document.querySelector('.menu_button');
  const showMenu = document.querySelector('.mobile-nav');
  let menuOpen = false;

  console.log(menu);
  
  menu.addEventListener('click', () => {
      if(!menuOpen){
          menu.classList.add('close');
          showMenu.classList.add('open');
          menuOpen= true;
      } else {
          menu.classList.remove('close');
          showMenu.classList.remove('open');
          menuOpen = false;
      }
  })
`

它一直给我一个错误信息，说不能读取 null 的属性 

const menu = document.querySelector('.menu_button')
线。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 在 Navbar (Navbar.jsx:17:1) 在 renderWithHooks (react-dom.development.js:14985:1)

这是完整的组件。


`import Toggle from "../Toggle/Toggle";
import "./Navbar.css";
import {Link} from 'react-scroll'





const Navbar = () => {

  const menu = document.querySelector('.menu_button');
  const showMenu = document.querySelector('.mobile-nav');
  let menuOpen = false;

  console.log(menu);
  
  menu.addEventListener('click', () => {
      if(!menuOpen){
          menu.classList.add('close');
          showMenu.classList.add('open');
          menuOpen= true;
      } else {
          menu.classList.remove('close');
          showMenu.classList.remove('open');
          menuOpen = false;
      }
  })




  return (
    <div className="n-wrapper" id="Navbar">
      {/* left */}
      <div className="n-left">
        <div className="n-name">Barr Ify</div>
        <Toggle />
      </div>
      {/* right */}
      <div className="n-right">
        <div className="n-list">
              <ul >

              <Link activeClass="active" to="Navbar" spy={true} smooth={true}>

                <li>
                    Home
                </li>

                </Link>

                <Link to="services" spy={true} smooth={true}>

                <li>
                    Services
                </li>

                </Link>

                <Link to="experience" spy={true} smooth={true}>

                <li>
                    Experience
                </li>

                </Link>

                <Link to="portfolio" spy={true} smooth={true}>

                <li>
                    Portfolio
                </li>

                </Link>

                <Link to="testimonial" spy={true} smooth={true}>

                <li>
                    Testimonial
                </li>

                </Link>

              <div className="menu-wrapper">


              <div className="menu_button">
                    <div className="bars"></div>
                </div>

              </div>
              </ul>
              

              </div>


{/* Mobile Nav */}


<div className="mobile-nav">
              <ul className="mobile-lists">
              <Link activeClass="active" to="Navbar" spy={true} smooth={true}>
                <li>
                    Home
                </li>
                </Link>
                <Link to="services" spy={true} smooth={true}>
                <li>
                    Services
                </li>
                </Link>
                <Link to="experience" spy={true} smooth={true}>
                <li>
                    Experience
                </li>
                </Link>
                <Link to="portfolio" spy={true} smooth={true}>
                <li>
                    Portfolio
                </li>
                </Link>
                <Link to="testimonial" spy={true} smooth={true}>
                <li>
                    Testimonial
                </li>
                </Link>
              </ul>
              
              <Link to="contact" spy={true} smooth={true}>
                      
                      <button className="button mobile-nav-button">Contact</button>
              
              </Link>
              </div>








              <Link to="contact" spy={true} smooth={true}>
                      
                      <button className="button n-button">Contact</button>
              
              </Link>
              
              </div>

              {/* Mobile Nav */}

              

              

    </div>
  );
};

export default Navbar;
`
reactjs react-navigation responsive hamburger-menu
2个回答
0
投票

你正试图在 React 组件中使用 vanilla JS DOM 操作，这可能会导致问题，因为 React 会为你管理 DOM。当你使用 React 时，最好使用内置的特性和钩子来操作 DOM，而不是直接查询和修改元素。

您应该了解并使用来自 React 的 useRef 和 useState 钩子。

使用这些钩子，您可以创建对 DOM 元素的引用，并管理组件的状态。然后，您可以创建一个函数来处理点击事件并相应地更新状态，最后使用 ref 属性将您的引用链接到适当的元素，并使用 onClick 属性添加点击事件处理程序。 我希望你能在没有社区支持的情况下自己处理代码中的更改——因为你需要它，首先阅读、尝试，如果没有帮助——回来 =) 但我相信你会处理它！ 祝你好运！

0
投票

@Sergey Karlinsky 我认为 useState 可以处理它。谢谢，你回答的前四行告诉了我我需要听到的一切。这是我的处理方式，如果有更清洁的方法请告诉我。

const Navbar = () => {

const [closeBar, setcloseBar] = useState (false)
const [showMenu, setshowMenu] = useState(false)




  return (
    <div className="n-wrapper" id="Navbar">
      {/* left */}
      <div className="n-left">
        <div className="n-name">Barr Ify</div>
        <Toggle />
      </div>
      {/* right */}
      <div className="n-right">
        <div className="n-list">
              <ul >

              <Link activeClass="active" to="Navbar" spy={true} smooth={true}>

                <li>
                    Home
                </li>

                </Link>

                <Link to="services" spy={true} smooth={true}>

                <li>
                    Services
                </li>

                </Link>

                <Link to="experience" spy={true} smooth={true}>

                <li>
                    Experience
                </li>

                </Link>

                <Link to="portfolio" spy={true} smooth={true}>

                <li>
                    Portfolio
                </li>

                </Link>

                <Link to="testimonial" spy={true} smooth={true}>

                <li>
                    Testimonial
                </li>

                </Link>

              <div className="menu-wrapper" onClick={() => {setshowMenu(!showMenu); setcloseBar(!closeBar);}}>


              <div className="menu_button" id={showMenu ? "close" : ""}>
                    <div className="bars"></div>
                </div>

              </div>
              </ul>
              

              </div>


{/* Mobile Nav */}


<div className="mobile-nav" id={closeBar ? "open" : ""}>
              <ul className="mobile-lists">
              <Link activeClass="active" to="Navbar" spy={true} smooth={true}>
                <li>
                    Home
                </li>
                </Link>
                <Link to="services" spy={true} smooth={true}>
                <li>
                    Services
                </li>
                </Link>
                <Link to="experience" spy={true} smooth={true}>
                <li>
                    Experience
                </li>
                </Link>
                <Link to="portfolio" spy={true} smooth={true}>
                <li>
                    Portfolio
                </li>
                </Link>
                <Link to="testimonial" spy={true} smooth={true}>
                <li>
                    Testimonial
                </li>
                </Link>
              </ul>
              
              <Link to="contact" spy={true} smooth={true}>
                      
                      <button className="button mobile-nav-button">Contact</button>
              
              </Link>
              </div>








              <Link to="contact" spy={true} smooth={true}>
                      
                      <button className="button n-button">Contact</button>
              
              </Link>
              
              </div>

              {/* Mobile Nav */}

              

              

    </div>
  );
};

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.