根据React中的url切换类

Question

这可能是非常简单的，但我正在寻找交换一个类，当我不在我的主页上。例如，我有这样的例子：

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

当我在主页上时，我希望能够将它切换回原来的类。这是因为我的主页是深色的，而其他页面是浅色的。

我做了一些研究，似乎我可以用一个三元运算符做到这一点？但是所有的例子，都是用于活动链接等，这是不正确的我需要的。

任何帮助都是最好的。

EDIT:要在其上更改类的组件

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;

Answer 1

示例：

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

Answer 2

对类使用三元运算符，可能如下所示：

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
}