स्क्रॉल करते समय मैं हेडर पृष्ठभूमि बदलना चाहता हूं, लेकिन समस्या यह है कि प्रतिक्रिया addEventListener
नहीं जानता है।
अगर मैं window
को document
में बदलता हूं तो कोई त्रुटि नहीं है लेकिन console.log(window.scrolly)
अपरिभाषित है।
यह सब कोड है:
import React, { Fragment, useState, window, useEffect } from "react";
import { Navbar, NavDropdown, Nav, Container } from "react-bootstrap";
import classes from "../../styles/header.module.css";
import { Icon } from "@iconify/react";
export default function header() {
const [transparentHeader, setHeader] = useState(false);
const listenScrollEvent = () => {
console.log(window.scrollY);
};
useEffect(() => {
window.addEventListener("scroll", listenScrollEvent);
return () => window.removeEventListener("scroll", listenScrollEvent);
}, []);
//
return (
<Fragment>
<Navbar expand="md" fixed="top" className={transparentHeader}>
<Container>
<Navbar.Brand href="#home">
<img src="/header.png"></img>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link className={classes.navlink} href="/">
Home
</Nav.Link>
<Nav.Link href="#pricing" className={classes.navlink}>
About
</Nav.Link>
<NavDropdown
title="Services"
id="collasible-nav-dropdown"
className={classes.services}
>
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
<NavDropdown
title="Pages"
id="collasible-nav-dropdown"
className={classes.services}
>
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
<NavDropdown
title="Blogs"
id="collasible-nav-dropdown"
className={classes.services}
>
<Icon icon="bx:bx-chevron-down" />
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#pricing" className={classes.navlink}>
Contact
</Nav.Link>
</Nav>
<Nav>
<Nav.Link
href="#deets"
className={(classes.navlink, classes.headerSearch)}
>
<Icon icon="bi:search" />
</Nav.Link>
<Nav.Link
href="#memes"
className={(classes.navlink, classes.SignIn)}
>
Iign In
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Fragment>
);
}
0
Zia Yamin
13 सितंबर 2021, 08:15
1 उत्तर
सबसे बढ़िया उत्तर
आपको रिएक्ट से window
जोड़ने की आवश्यकता नहीं है, यह पहले से ही ब्राउज़र वातावरण में उपलब्ध है:
तो खिड़की हटा दें:
आयात प्रतिक्रिया, { Fragment, useState, window, useEffect } "react" से;
1
Ryan Le
13 सितंबर 2021, 08:36
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।
useEffect
के अंदर रखते हैं तो यह कोई समस्या नहीं होनी चाहिए, क्या आप सुनिश्चित हैं कि आपके पास कहीं औरwindow.addEventListener
नहीं है?