文档查询选择器在反应中返回未定义答案

【问题标题】：Document query selector returns undefined in react文档查询选择器在反应中返回未定义
【发布时间】：2021-05-15 11:43:05
【问题描述】：

我正在尝试构建一个切换侧边栏。当我单击按钮时，.m-toggle 的类列表应该会更新。但是反应给我一个错误

"TypeError: 无法读取属性 'classList' of null"

这是我的代码：

import React, { useState, useEffect } from 'react'
// import Sidebar from '../Components/Sidebar'
import AppleIcon from '@material-ui/icons/Apple'
import DashboardIcon from '@material-ui/icons/Dashboard'
import PeopleIcon from '@material-ui/icons/People'
import NotificationsIcon from '@material-ui/icons/Notifications'
import SettingsIcon from '@material-ui/icons/Settings'
import HelpIcon from '@material-ui/icons/Help'
import img from '../Assets/img/keval.jpg'

function toggleMenu() {
  let toggle = document.querySelector('.m-toggle')
  toggle.classList.toggle('m-active')
}

const Main = () => {
  return (
    <>
      <div className="m-body">
        <div className="m-container">
          {/* -------Sidebar Start------- */}
          <div className="m-navigation">
            <ul style={{ padding: '0' }}>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <AppleIcon className="muicon" />
                  </span>
                  <span className="m-title">
                    <h2>Brand Name</h2>
                  </span>
                </a>
                <hr style={{ color: 'white' }} />
              </li>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <DashboardIcon className="muicon" />
                  </span>
                  <span className="m-title">Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <PeopleIcon className="muicon" />
                  </span>
                  <span className="m-title">Employees</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <NotificationsIcon className="muicon" />
                  </span>
                  <span className="m-title">Notification</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <HelpIcon className="muicon" />
                  </span>
                  <span className="m-title">Help</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span className="m-icon">
                    <SettingsIcon className="muicon" />
                  </span>
                  <span className="m-title">Setting</span>
                </a>
              </li>
            </ul>
          </div>
          {/* --------Side BAr End--------- */}
          <div className="m-main">
            <div className="m-topbar">
              <div className="m-toggle" onClick={toggleMenu()}>
                f
              </div>
              <div className="m-search">
                <label>
                  <input type="text" placeholder="Search here" />
                </label>
              </div>
              <div className="user">
                <img src={img} alt="no img" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Main

你可以看到onclick类列表应该更新但没有更新的代码。

【问题讨论】：

“文档查询选择器返回未定义...”（不会是这种情况）但随后 “类型错误：无法读取属性 ClassList 的空”。标题应该对实际问题给出适当的总结，而不是“可能描述情况足够好”
可能是在样式表中您使用display: none 表示.m-toggle 或父元素。如果你想通过querySelector获取元素，你需要使用visibility: hidden
这是因为你这样做了onClick={toggleMenu()}，它甚至在挂载之前就立即调用了该函数。你应该使用onClick={toggleMenu}
... 并且由于在 .m-toggle 元素上触发了 click 事件，因此您不需要使用 querySelector，因为 this 已经引用了该元素

标签： javascript css node.js reactjs

【解决方案1】：

我看到的一个问题是您没有在 onClick 中传递函数引用，而是执行函数调用：

<div className="m-toggle" onClick={toggleMenu()}>

toggleMenu 后的括号去掉：

<div className="m-toggle" onClick={toggleMenu}>

或将其作为内联箭头函数传递：

<div className="m-toggle" onClick={() => toggleMenu()}>

【讨论】：

【解决方案2】：

几个问题：

React onClick 需要一个函数，但您正在调用 toggleMenu。应该是onClick={toggleMenu} 或onClick={()=>toggleMenu()}
您应该使用 state 管理 className 而不是使用 document.querySelector() 并自己修改元素。

【讨论】：

【解决方案3】：

您在组件渲染期间调用了 toggleMenu() 方法，这是您不应该做的。因此，当您的组件尝试渲染时，它会调用toggleMenu 方法并为m-toggle query selector 返回null。您可以绑定函数引用或使用箭头函数。

<div className="m-toggle" onClick={toggleMenu}>

或

<div className="m-toggle" onClick={() => toggleMenu()}>

【讨论】：