Элемент показывает, когда он должен быть скрыт - PullRequest
Новая
       21

Элемент показывает, когда он должен быть скрыт

0 голосов
/ 12 июня 2019

Я создаю загрузочную навигацию, где элементы меню навигации скрыты, пока вы не прокрутите до полной высоты окна просмотра устройства / браузера. Они отображаются при начальной загрузке страницы, но после прокрутки они скрываются, а затем снова появляются после прокрутки.

Это контролируется добавлением классов скрытия и показа. Но классы скрытия добавляются при загрузке страницы.

Есть идеи, как предотвратить добавление классов при обновлении / начальной загрузке страницы?

Навигация: 

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>
    );
  }
}

1 Ответ

2 голосов
/ 12 июня 2019

Проблема в том, что state инициализируется дважды.Один раз как поле класса, а другое в конструкторе.

Один в конструкторе имеет приоритет над другим, и, поскольку isTop там отсутствует, он в конечном итоге становится undefined

Переместите инициализацию isTop в конструктор: 

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

и панель навигации по умолчанию должна быть скрыта

...