根據React中的url切換類

這可能非常簡單，但是當我不在主頁上時，我想換一個課程。例如我有這個：

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;

uj5u.com熱心網友回復：

例子：

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

uj5u.com熱心網友回復：

對類使用三元運算子，可能是這樣的：

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
}

標籤：javascript css 反应

上一篇：單擊復選框時，是否可以從左到右的文本裝飾為CSS線條設定影片？

下一篇：子div增長到父div的全寬