Javascript ReactJS中未定义的变量

因此，我想在react中为我的网站制作一个粘性导航条，我有一些javascript代码，当我运行它时，我得到一个错误，说

TypeError:cannotread属性'remove'of undefined

，当我执行

Console.log（nav）

时，它说它已定义，但当我执行

Console.log（粘性）时

它说它没有定义，这就是为什么我会出现错误，因为我试图在它没有定义的东西上运行

删除

import React from "react"
import {Link} from "react-router-dom"
import './App.css';


export default function App (){
  const navStyle = {
     color: "white"
  };
    // When the user scrolls the page, execute myFunction
  window.onscroll = function() {myFunction()};

  // Get the navbar
  var nav = document.getElementsByClassName("nav");
  console.log(nav)

  // Get the offset position of the navbar
  var sticky = nav.offsetTop;
  console.log(sticky)

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      nav.classList.add("sticky")
    } else {
      nav.classList.remove("sticky");
    }
  }


  return (
    <div className="App-header">
      <nav className="nav">
        <h3>Logo</h3>
        <ul>
          <Link style={navStyle} to="/">
              <li>Home</li>
          </Link>
          <Link style={navStyle} to="LogIn">
            <li>Log In</li>
          </Link>
      </ul>
      </nav>
    </div>
  )
}

从“React”导入React
从“反应路由器dom”导入{Link}
导入“/App.css”；
导出默认函数应用程序（）{
常量导航样式={
颜色：“白色”
};
//当用户滚动页面时，执行myFunction
window.onscroll=function（）{myFunction（）}；
//获取导航栏
var nav=document.getElementsByClassName（“nav”）；
控制台日志（nav）
//获取导航栏的偏移位置
var sticky=导航偏移；
console.log（粘性）
//当您到达滚动位置时，将sticky类添加到导航栏。当您离开滚动位置时，删除“sticky”
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）
}否则{
导航类列表。删除（“粘滞”）；
}
}
返回(
标志

家
登录

)
}

错误表明问题在

nav.classList.remove（“sticky”）

任何帮助都将不胜感激

---

谢谢

错误在于

getElementsByClassName

返回元素列表。您只需要获取第一个元素。但这不是用react钩子做这件事的正确方法。您应该使用

useRef

和

useffect

挂钩

import React from "react"
import {Link} from "react-router-dom"
import './App.css';


export default function App (){
  const navStyle = {
     color: "white"
  };
  const navRef= useRef(null);
  

  useEffect(() => {
    window.addEventListener('scroll', myFunction);
    () => { window.removeEventListener('scroll', myFunction) }
  }, []) 
  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    var nav = navRef.current
    console.log(nav)

    // Get the offset position of the navbar
    var sticky = nav.offsetTop;
    console.log(sticky)
    if (window.pageYOffset >= sticky) {
      nav.classList.add("sticky")
    } else {
      nav.classList.remove("sticky");
    }
  }


  return (
    <div className="App-header">
      <nav ref={navRef} className="nav">
        <h3>Logo</h3>
        <ul>
          <Link style={navStyle} to="/">
              <li>Home</li>
          </Link>
          <Link style={navStyle} to="LogIn">
            <li>Log In</li>
          </Link>
      </ul>
      </nav>
    </div>
  )
}

从“React”导入React
从“反应路由器dom”导入{Link}
导入“/App.css”；
导出默认函数应用程序（）{
常量导航样式={
颜色：“白色”
};
const navRef=useRef（空）；
useffect（（）=>{
window.addEventListener（'scroll'，myFunction）；
（）=>{window.removeEventListener（'scroll'，myFunction）}
}, []) 
//当您到达滚动位置时，将sticky类添加到导航栏。当您离开滚动位置时，删除“sticky”
函数myFunction（）{
var nav=导航参考电流
控制台日志（nav）
//获取导航栏的偏移位置
var sticky=导航偏移；
console.log（粘性）
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）
}否则{
导航类列表。删除（“粘滞”）；
}
}
返回(
标志

家
登录

)
}

您忘记访问

nav

类的第一个元素。 您试图从元素数组中获取属性，这是不正确的

这应该起作用：

import React from "react";
import "./styles.css";

export default function App() {
  const navStyle = {
    color: "white"
  };
  // When the user scrolls the page, execute myFunction
  window.onscroll = function () {
    myFunction();
  };

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    var nav = document.getElementsByClassName("nav")[0];
    var sticky = nav.offsetTop;
    if (window.pageYOffset >= sticky) {
      nav.classList.add("sticky");
    } else {
      nav.classList.remove("sticky");
    }
  }

  return (
    <div className="App-header">
      <nav className="nav">
        <h3>Logo</h3>
        <ul>
          <li>Home</li>
          <li>Log In</li>
        </ul>
      </nav>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
常量导航样式={
颜色：“白色”
};
//当用户滚动页面时，执行myFunction
window.onscroll=函数（）{
myFunction（）；
};
//当您到达滚动位置时，将sticky类添加到导航栏。当您离开滚动位置时，删除“sticky”
函数myFunction（）{
var nav=document.getElementsByClassName（“nav”）[0]；
var sticky=导航偏移；
如果（window.pageYOffset>=粘性）{
导航类列表添加（“粘性”）；
}否则{
导航类列表。删除（“粘滞”）；
}
}
返回(
标志

家
登录

);
}

---

链接：

这不是做事的方式。您应该使用

useRef

和

useffect