粘性导航栏未更新

Question

我有一个Reactjs脚本，我试图制作一个粘性导航栏，但是在滚动时，导航栏会随页面一起移动。有没有办法使用componentDidMount / update，还是我必须回到useEffect？

我想在滚动条上隐藏我的顶部，联系方式。

• 我正在使用带有bootstrap 4.5.2的reactstrap

import React from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container,
  ListGroup,
  ListGroupItem,
} from "reactstrap";

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      isScrolled: false,
    };
  }
  offSet = window.scrollY;
  setScrolled = (value) => {
    this.setState({ isScrolled: value });
  };
  handleScroll = () => {
    if (this.offSet > 200) {
      this.setScrolled(true);
    } else {
      this.setScrolled(false);
    }
  };
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }
  toggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };
  render() {
    return (
      <Container>
        <div className="d-flex flex-row-reverse">
          <div className="px-2">
            <i className="fas fa-phone"></i>
            <a href="tel:+254*******">+254 *** ****</a>
          </div>
          <div className="px-2">
            <i className="fas fa-at"></i>{" "}
            <a href="#">info@#</a>
          </div>
        </div>

        <Navbar
          color="light"
          light
          expand="md"
          className={`${this.state.isScrolled ? "fixed-top" : ""}`}
          sticky="top"
        >
          <NavbarBrand href="/">
            <img
              src="/static/frontend/images/Logo.png"
              width="30"
              height="30"
              className="d-inline-block align-top"
            />{" "}
            Solutions General
          </NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="mr-auto" navbar>
              <NavItem>
                <NavLink href="#">Services</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="#">Projects</NavLink>
              </NavItem>
            </Nav>

            <NavLink href="#">Contact Us</NavLink>
          </Collapse>
        </Navbar>
      </Container>
    );
  }
}
export default Navigation;

Answer 1

您没有注册/绑定功能，因此它们被称为对象 并删除不需要的进口

import React from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container,
} from "reactstrap";

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.setScrolled = this.setScrolled.bind(this);
    this.state = {
      isOpen: false,
      scrolled: false,
    };
  }
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }
  setScrolled(value) {
    this.setState({ scrolled: value });
  }
  handleScroll() {
    const offset = window.scrollY;
    if (offset > 30) {
      this.setScrolled(true);
    } else {
      this.setScrolled(false);
    }
  }
  toggle() {
    this.setState({ isOpen: !this.state.isOpen });
  }
  render() {
    return (
      <Container className={this.state.scrolled ? "sticky-top mb-2" : ""}>
        <div
          className={` ${
            this.state.scrolled ? "d-none" : "d-flex flex-row-reverse"
          }`}
        >
          <div className="px-2">
            <i className="fas fa-phone"></i>
            <a href="#">123456789</a>
          </div>
          <div className="px-2">
            <i className="fas fa-at"></i>{" "}
            <a href="#">mail@mail.com</a>
          </div>
        </div>
        <div>
          <Navbar
            color="light"
            light
            expand="md"
            //fixed={this.state.scrolled ? "top" : ""}
          >
            <NavbarBrand href="/">
              <img
                src="/static/frontend/images/Logo.png"
                width="30"
                height="30"
                className="d-inline-block align-top"
              />{" "}
              Solutions General
            </NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="mr-auto" navbar>
                <NavItem>
                  <NavLink href="#">Services</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="#">Projects</NavLink>
                </NavItem>
              </Nav>

              <NavLink href="#">Contact Us</NavLink>
            </Collapse>
          </Navbar>
        </div>
      </Container>
    );
  }
}
export default Navigation;

componentdidmount创建一个键，其值是函数，因此将函数绑定以调用它们（尤其是使用参数） 在“ https://reactjs.org/docs/react-component.html”上阅读有关此内容的更多信息 欢呼