स्क्रॉल करते समय मैं हेडर पृष्ठभूमि बदलना चाहता हूं, लेकिन समस्या यह है कि प्रतिक्रिया 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
क्या आप Nextjs या कुछ SSR ढांचे का उपयोग कर रहे हैं?
 – 
Ryan Le
13 सितंबर 2021, 08:17
मैं नेक्स्टज का उपयोग कर रहा हूँ
 – 
Zia Yamin
13 सितंबर 2021, 08:18
यदि आप इसे useEffect के अंदर रखते हैं तो यह कोई समस्या नहीं होनी चाहिए, क्या आप सुनिश्चित हैं कि आपके पास कहीं और window.addEventListener नहीं है?
 – 
Ryan Le
13 सितंबर 2021, 08:23
हाँ, मैं इसके बारे में निश्चित हूँ
 – 
Zia Yamin
13 सितंबर 2021, 08:24
1
मैंने एक उत्तर जोड़ा, देखें कि क्या यह मदद करता है।
 – 
Ryan Le
13 सितंबर 2021, 08:36

1 उत्तर

सबसे बढ़िया उत्तर

आपको रिएक्ट से window जोड़ने की आवश्यकता नहीं है, यह पहले से ही ब्राउज़र वातावरण में उपलब्ध है:

तो खिड़की हटा दें:

आयात प्रतिक्रिया, { Fragment, useState, window, useEffect } "react" से;

1
Ryan Le 13 सितंबर 2021, 08:36