تبدیل class به hooks

2 هفته پیش توسط ایلیا فرامرزپور آپدیت شد
آفلاین
user-avatar
saeed ghezel arsalan ( 2408 تجربه )
2 هفته پیش

لینک کوتاه اشتراک گذاری

-1

دوستان این کلاس میخوام به هوک ببرم به چه شکل میشه؟


export default class Navbar extends React.Component {
 constructor() {
 super();
this.state = {
 show: true,
scrollPos: 0
 };
 }
componentDidMount() {
 window.addEventListener("scroll", this.handleScroll);
  }
 componentWillUnmount() {
 window.removeEventListener("scroll", this.handleScroll);
}
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
 })};
};
render() {
return(
<nav className={this.state.show ? "active" : "hidden"}></nav>
)}}

کد css:


.active{
height: 4rem;
width: 100%;
position: fixed;
top: 0px;
transition: 0.3s linear;
display: flex;
justify-content:stretch;
align-items: center;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0, 0, 0, .1);
z-index: 40;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
/* padding: 0 7%; */
}
.hidden{
height: 4rem;
width: 100%;
z-index: 40;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
position: fixed;
top: -80px;
transition: 0.3s linear;
}
آفلاین
user-avatar
saeed ghezel arsalan ( 2408 تجربه )
2 هفته پیش

لینک کوتاه اشتراک گذاری

0

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

آفلاین
user-avatar
فاطمه کاظمی زاده ( 36402 تجربه )
2 هفته پیش
تخصص : مدرس مجتمع فنی _ برنامه نویس ارشد Front-End - وبسایت: fatemeh-kazemi.ir

لینک کوتاه اشتراک گذاری

1

این مدلی میشه

import React, { Component } from 'react';
class Navbar  extends Component {
// محل قرارگیری متد ها
    render() {
        return (
// محل قرارگیری کدهای html
        )
    }
}
export default Navbar ;
آفلاین
user-avatar
ایلیا فرامرزپور ( 45770 تجربه )
2 هفته پیش
تخصص : Front-End Developer

لینک کوتاه اشتراک گذاری

1

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

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 که مشخص کردید.

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

آفلاین
user-avatar
saeed ghezel arsalan ( 2408 تجربه )
2 هفته پیش

لینک کوتاه اشتراک گذاری

0

@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

آفلاین
user-avatar
ایلیا فرامرزپور ( 45770 تجربه )
2 هفته پیش
تخصص : Front-End Developer

لینک کوتاه اشتراک گذاری

0

@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);
  }
};
برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.