Блог

Как и на скриншоте выше, я использую Semantic-UI, где выделенное меню выделяется. Как показано в моем коде ниже, я установил состояние для любого меню, на которое нажимает пользователь. Мой приведенный ниже код работает нормально, но я думаю, что это неэффективный способ написания кода, поскольку я в основном вызываю две функции каждый раз, когда я рендерю, просто чтобы изменить имена классов.

Есть ли лучший способ добиться этого?

Пожалуйста, сообщите.

 
const Navigation = () => {
  const [selected, setSelected] = useState("Comments");

  const onSelection = (e) => {
    setSelected(e.target.textContent);
  };

  const commentActive = () => {
    return selected === "Comments" ? "active" : "";
  };

  const searchActive = () => {
    return selected === "Search" ? "active" : "";
  };

  return (
    <div className="ui secondary pointing menu">
      <a className={`item ${commentActive()}`} onClick={(e) => onSelection(e)}>
        Comments
      </a>
      <a className={`item ${searchActive()}`} onClick={(e) => onSelection(e)}>
        Search
      </a>
    </div>
  );
};
  

Я думаю, вам не следует жестко кодировать логические условия selected === 'Comments' как подверженные ошибкам, потому что, если вы решите изменить контекст привязки без изменения условия, у вас может возникнуть ошибка: target.textContent !== 'Comments' ;

Вместо этого используйте перечисления:

 const NAV_SECTIONS = {
  COMMENTS: "comments",
  SEARCH: "search",
};

const Navigation = () => {
  const [selected, setSelected] = useState(NAV_SECTIONS.COMMENTS);

  return (
    <div className="ui secondary pointing menu">
      <a
        className={`item ${selected === NAV_SECTIONS.COMMENTS ? "active" : ""}`}
        onClick={() => setSelect(NAV_SECTIONS.COMMENTS)}
      >
        {/* We changed the content and the code didn't break */}
        My Cool Comments
      </a>
      <a
        className={`item ${selected === NAV_SECTIONS.SEARCH ? "active" : ""}`}
        onClick={() => setSelect(NAV_SECTIONS.SEARCH)}
      >
        My Best Search
      </a>
    </div>
  );
};