تبدیل class به hooks

ممنون میشم پاسخ بدید

این مدلی میشه

import React, { Component } from 'react';
class Navbar  extends Component {
// محل قرارگیری متد ها
    render() {
        return (
// محل قرارگیری کدهای html
        )
    }
}
export default Navbar ;

سلام وقتتون بخیر.

import { useEffect, useState } from "react";
import "./style.css";
function NavBar() {
  const [show, setShow] = useState(true);
  const [scrollPos, setScrollPos] = useState(true);
  useEffect(() => {
window.addEventListener("scroll", this.handleScroll);
// returned function will be called on component unmount
return () => {
  window.removeEventListener("scroll", this.handleScroll);
};
  }, []);
  const handleScroll = () => {
console.log(document.body.getBoundingClientRect());
if (window.scrollY > 200) {
  this.setState({
    scrollPos: document.body.getBoundingClientRect().top,
    show: document.body.getBoundingClientRect().top > this.state.scrollPos,
  });
}
  };
  return <nav className={this.state.show ? "active" : "hidden"}></nav>;
}

export default NavBar;

و در فایل کناری یا هر قسمتی که خودتون صلاح میتونید فایل css اتون رو قرار بدید و لینک دهی کنید به فایل NavBar که مشخص کردید.

اگر سوال دیگه ای بود زیر همین کامنت قرار بدید که بتونم راهنمایی اتون کنم

@iliafaramarzpour ممنون از اینکه وقت گذاشتید و پاسخ دادید ولی وقتی کد شما رو وارد کردم ارور داد :
TypeError: Cannot read properties of undefined (reading 'handleScroll')
TypeError: Cannot read properties of undefined (reading 'state')

من تو پست جداگانه که لینکش رو میزارم این حالت رو در react hook کدنویسی کردم ولی مشکلم اینه که وقتی اسکرول به سمت بالا میشه نوبار نمایش داده نمیشه. ممنون میشم اون کد رو بررسی کنید.
https://roocket.ir/discuss/%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D8%AF%D8%A7%D8%AF%D9%86-%D9%86%D9%88%D8%A8%D8%A7%D8%B1-%D9%88%D9%82%D8%AA%DB%8C-%D8%A7%D8%B3%DA%A9%D8%B1%D9%88%D9%84-%D8%A8%D9%87-%D8%B3%D9%85%D8%AA-%D8%A8%D8%A7%D9%84%D8%A7-%D9%85%DB%8C%D8%B4%D9%87

@saeedghezelarsalan

سلام وقتت بخیر بله در قسمت پایین که از استیت استفاده میشه من فراموش کردم براتون بزارم باید اسم استیت رو مستقیما استفاده کنید

return <nav className={show ? "active" : "hidden"}></nav>;

و همچنان در scrollPos و show باید setState بشه به این صورت :

setScrollPos(document.body.getBoundingClientRect().top) 

setShow(document.body.getBoundingClientRect().top > this.state.scrollPos)

و برای useEffect باید به این صورت function هارو فراخوانی کنید در اکشن ایونت ها برای window :

useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  // returned function will be called on component unmount
  return () => {
window.removeEventListener("scroll", handleScroll);
  }
};