отключить функциональность компонента на основе страницы - PullRequest
Новая
       33

отключить функциональность компонента на основе страницы

1 голос
/ 12 июня 2019

I навигация, в которой пункты меню скрыты, пока вы не достигнете определенной точки на странице, после чего они отобразятся.

Это прекрасно работает на домашней странице, потому что это довольно длинная страница. Но некоторые другие мои страницы короткие и не превышают высоту области просмотра. Таким образом, при загрузке страницы нет пунктов меню навигации, и это показывает, что навигация пуста.

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

Пример: в Jekyll вы можете создать оператор if и скрыть класс или раздел, используя что-то вроде {% if page.layout == 'home' %}hide{% endif %}. Есть ли эквивалентный / аналогичный метод при использовании «Реакция»?

Код: 

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,
      isTop: true,
      width: 0, 
      height: 0
    };
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

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

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

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

  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 Ответ

1 голос
/ 12 июня 2019

Gatsby поставляется с досягаемым маршрутизатором, так что вы можете использовать его, чтобы получить location.pathname, а затем сделать что-то условно. 

import React from 'react'
import { Location } from '@reach/router'

const HomepageOnly = () => (
  <Location>
    {({ location }) =>
      location.pathname === '/' ? (
        <p>This is the homepage</p>
      ) : (
        <p>This is not</p>
      )
    }
  </Location>
)

export default HomepageOnly

Codesandbox

...