Активный элемент навбара

Question

Есть react-компонент - навбар:

import React from 'react';

function Navbar(props) {
  return (
    <nav className="navbar">
      <a data-id="first" href="/">/</a>
      <a data-id="second" href="/link">/link</a>
    </nav>
  );
}

export default Navbar;

<Navbar active="second" />

Как можно в зависимости от props.active выделять активный элемент?

На обычном js я бы создал объект с ссылками и с помощью цикла генерировал бы сам навбар:

const objOfArr = {
  "1": {
    text: "some text",
    href: "/"
  },
  "2": {
    text: "some text",
    href: "/link"
  }
}

function nav(obj, active = "1") {
  let nav = document.createElement('nav');
  for (item in obj) {
    const a = document.createElement('a');
    a.textContent = obj[item].text;
    a.href = obj[item].href;
    if (item == active) {
      a.style.color = 'red';
    }
    nav.appendChild(a);
  }

  return nav;
}

document.querySelector('div').appendChild(nav(objOfArr, 2));

<div></div>

Answer 1

Как вариант вот так: пример.

Ну или используйте библиотеку classnames

export default function App() {
  return (
    <div className="App">
      <Navbar first="true" />
      <Navbar second="true" />
    </div>
  );
}


function Navbar(props) {
  return (
    <nav className="navbar">
      <a className={props.second && "active"} href="/">
        /
      </a>
      <a className={props.second && "active"} href="/link">
        /link
      </a>
    </nav>
  );
}

export default Navbar;

БЛОГ НА HUSL

Активный элемент навбара

Ответы (1 шт):