Блог

Это, вероятно, очень просто, но я хочу поменять класс, когда меня нет на моей домашней странице. Например, у меня есть это:

 customBurgerIcon={
          <span className='font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline'>
            Menu
          </span>
        }
 

Я хочу переключиться text-gray-100 на другой класс, когда меня нет на моей домашней странице. Я также хочу иметь возможность отключать изображение, когда я не нахожусь на своей домашней странице.

 import Logo from '../images/logo-2-light.png';

// markup
const Header = () => {
  return (
    // <header className=' '>
    <header className='bg-transparent absolute top-8 md:top-14 left-10 z-10'>
      <Link to='/'>
        <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
      </Link>
    </header>
  );
};
 

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

Я провел некоторое исследование, и кажется, что я могу сделать это с помощью тернарного оператора? Но все примеры используются для активных ссылок и т. Д., Что не подходит для того, что мне нужно.

Любая помощь была бы очень кстати.

РЕДАКТИРОВАТЬ: компонент, на котором я хочу изменить класс

 import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import { Link } from 'gatsby';

var styles = {
  bmCrossButton: {
    height: '64px',
    width: '64px',
    right: '2rem',
    top: '2rem',
  },
  bmMenuWrap: {
    position: 'fixed',
    height: '100%',
  },
  bmMorphShape: {
    fill: '#373a47',
  },
  bmOverlay: {
    background: 'rgba(0, 0, 0, 0.3)',
  },
};

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false,
    };
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen });
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false });
  }

  // This can be used to toggle the menu, e.g. when using a custom icon
  // Tip: You probably want to hide either/both default icons if using a custom icon
  // See https://github.com/negomi/react-burger-menu#custom-icons
  toggleMenu() {
    this.setState((state) => ({ menuOpen: !state.menuOpen }));
  }

  render() {
    return (
      <Menu
        right
        width={425}
        styles={styles}
        isOpen={this.state.menuOpen}
        onStateChange={(state) => this.handleStateChange(state)}
        burgerButtonClassName={'absolute top-8 md:top-14 right-10 hover:underline text-white'}
        // crossButtonClassName={'absolute top-16 md:top-14 right-10 text-gray-900'}
        itemListClassName={'flex'}
        menuClassName={'bg-gray-900 text-gray-100 px-6 focus:outline-none'}
        customBurgerIcon={
          <span className={`font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline`}>
            Menu
          </span>
        }
        customCrossIcon={
          <span className='font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline'>
            Close
          </span>
        }>
        <div className='flex flex-col pt-16 sm:pt-32 md:pt-48 px-12 '>
          <nav className='flex flex-col '>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/'>
              Home
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/charity'>
              Our Charity
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl tracking-wide hover:text-red-500'
              to='/contact'>
              Contact
            </Link>
          </nav>
          </div>
        </div>
      </Menu>
    );
  }
}

export default Sidebar;
 

Пример:

 const Header = () => {

  const url = typeof window !== 'undefined' ? window.location.href : '';

  return (
    <header className={url === 'yoursite.com/home' ? 'text-gray-100' : ''}>
      <Link to='/'>
        <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
      </Link>
    </header>
  );
};
 

Используйте тернарный оператор для классов, может быть так:

 className={`font-bold text-xl ${condition ? 'text-gray-100': ''}`}
 

Для изображения можно сделать вот так внутри компонента:

 {
    condition ? 
        <Link>
            <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo'/>
        </Link> : <> </> // Or the image replacement
}