显示何时应隐藏的项目答案

【问题标题】：Item showing when it should be hidden显示何时应隐藏的项目
【发布时间】：2019-10-27 07:25:16
【问题描述】：

我正在创建一个引导导航，其中隐藏导航菜单项，直到您滚动到设备/桌面浏览器视口的完整高度。它们在初始页面加载时显示，但是一旦您滚动它们就会隐藏，然后在滚动后重新出现。

它是通过添加隐藏和显示类来控制的。但是，隐藏类是在页面加载时添加的。

知道如何防止在刷新/初始页面加载时添加类吗？

导航：

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

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
      width: 0, 
      height: 0
    };
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  state = {
    isTop: true,
  };

  componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < window.innerHeight;
      if (isTop !== this.state.isTop) {
          this.setState({ isTop })
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">Maryland <span>Brand</span></NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink className="active" href="/">Our Brand</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Logos</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Color</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Typography</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Imagery</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Editorial</NavLink>
              </NavItem>
              <NavItem>
                <NavLink className="red bold uppercase show" href="/">Communicators Toolkit</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

【问题讨论】：

标签： javascript reactjs twitter-bootstrap reactstrap

【解决方案1】：

这里的问题是state 被初始化了两次。曾经作为类字段和构造函数中的其他字段。

构造函数中的一个优先于另一个，因为那里缺少isTop，所以它最终是undefined

将isTop 初始化移动到构造函数中：

this.state = {
  isOpen: false,
  width: 0, 
  isTop: true,
  height: 0
};

导航栏默认是隐藏的

【讨论】：