ReactJs - Как я могу добавить «активный» класс к кнопкам панели навигации в зависимости от того, какая страница используется в данный момент? - PullRequest
Новая
       13

ReactJs - Как я могу добавить «активный» класс к кнопкам панели навигации в зависимости от того, какая страница используется в данный момент?

0 голосов
/ 12 марта 2020

Я новичок в React , после того, как я прочитал многочисленные уроки YouTube, я все еще не могу понять, как go узнать об этом, я думаю, это связано с использованием " состояний"но каждая попытка пока не удалась. Я дергаю себя за волосы!

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

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

Просто интересно, как вы, ребята, go об этом? Я чувствую, что это простая концепция, которую я не могу сделать.

Вот панель навигации: 

function NavBar() {

  {/* Variable to store the name which page has just been clicked, which by default is the home page */}
  const isActive = "home";


  return (    
    <nav className="landing-page__nav-bar nav-bar">
    <ul className="nav-bar__list">
    {/* Button to Home Page */}
      <Link to ='/'><li><a data-page="home" className="home-link">
        <button href="landingpage" className={` ${isActive === "home" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("home")}>Home</button>
        </a></li>
      </Link>
    {/* Button to Portfolio Page */}
      <Link to ='/portfolio'><li><a data-page="portfolio" className="portfolio-link">
        <button className={` ${isActive === "portfolio" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("portfolio")}>Portfolio</button>
        </a></li>
        </Link>
    {/* Button to Artwork Page */}
      <Link to ='/artwork'><li><a data-page="doodles" className="doodles-link">
      <button className={` ${isActive === "artwork" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("artwork")}>Artwork</button>
        </a></li></Link>
      {/* Button to Photography Page */}
      <Link to ='/photography'><li><a data-page="photography" className="photography-link">
        <button className={` ${isActive === "photography" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("photography")}>Photography</button>
        </a></li></Link>
      {/* Button to CV Page */}
      <Link to ='/cv'><li><a data-page="cv" className="cv-link">
      <button className={` ${isActive === "cv" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("cv")}>CV</button
        ></a></li></Link>
      {/* Button to About Page */}
      <Link to ='/about'><li><a data-page="about" className="about-link">
      <button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>
        </a></li></Link>
      {/* Button to Contact Page */}
      <Link to ='/contact'><li><a data-page="contact" className="contact-link">
      <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("contact")}>Contact</button>
        </a></li></Link>     

    </ul>
  </nav>

  );
    }

export default NavBar;

Вот функция, которую я собирался использовать в панели навигации для добавить «активный» класс к кнопке: 

function ChangeActiveButton(selectedButton) {
    //What can i do here?
}

export default ChangeActiveButton;

1 Ответ

1 голос
/ 12 марта 2020

Вы можете использовать useState для этого

В вашей функции (до возврата) напишите это 

const [isActive,setActive] = useState("home")

Вам необходимо импортировать useState из react И на кнопка напишите это 

 <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => setActive("contact")}>Contact</button>

Вы также можете использовать NavLink из react-router-dom, у которого есть опора activeClassName (но это поместит класс в ссылку, а не в кнопку)

...