javascript - 禁用基于页面的组件功能

Question

我有一个导航，其中菜单项是隐藏的，直到您到达页面上的某个点，然后它们才会显示。

这在主页上效果很好，因为它是一个相对较长的页面。但是，我的其他一些页面很短，没有超过视口(viewport)的高度。因此，当页面加载时，没有导航菜单选项，并且显示导航为空白。

有没有一种方法可以根据您所在的布局或页面有条件地禁用组件？

示例:在 Jekyll 中，您可以创建一个 if 语句并使用类似 {% if page.layout == 'home' %}hide{% endif %} 的东西隐藏一个类或部分。使用react时是否有等效/相似的方法？

代码:

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

Answer 1

Gatsby 带有 reach router，所以你可以用它来获取 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