类型错误：无法读取 react 中未定义的属性(读取"addEventListener".js

Question

我想在滚动时更改标题背景，但问题是react不知道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>
);
}

Answer 1

你不需要从React中添加window，它已经在浏览器环境中可用:

所以remove window:

从" React "中导入React， {Fragment, useState，window， useEffect}