دوستان این کلاس میخوام به هوک ببرم به چه شکل میشه؟
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;
}
این مدلی میشه
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
سلام وقتت بخیر بله در قسمت پایین که از استیت استفاده میشه من فراموش کردم براتون بزارم باید اسم استیت رو مستقیما استفاده کنید
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);
}
};
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟