Блог

У меня есть этот компонент, и я сопоставляю свой массив, чтобы создать 10 элементов навигации. Как мне добавить метод onClick, чтобы добавить активный класс к выбранному элементу. Есть ли здесь лучшая практика с помощью хуков / более нового способа реагирования? На самом деле я не ищу здесь решение для маршрутизатора React.

Я пропустил, создав их <a> и <span> против <ul> amp; <li> ? Имеет ли это значение?

 import React from "react";

var sections = [
  "arts",
  "business",
  "health",
  "home",
  "movies",
  "opinion",
  "politics",
  "science",
  "sports",
  "technology",
];

export default function Masthead() {
  return (
    <div className="masthead">
      {sections.map((section, idx) => {
        return (
          <a href={section} key={idx}>
            <span>{section}</span>
          </a>
        );
      })}
    </div>
  );
}
 

Я бы сделал что-то вроде этого:

 import React from "react";

var sections = [
  "arts",
  "business",
  "health",
  "home",
  "movies",
  "opinion",
  "politics",
  "science",
  "sports",
  "technology",
];

export default function Masthead() {
 const [cur_section, setCurSection] = React.useState('')

  return (
    <div className="masthead">
      {sections.map((section, idx) => {
        return (
          <a href={"#" section} key={idx} 
             onClick={() => setCurSection(section)}
             className={section === cur_section ? "active": ""}
           >
            <span>{section}</span>
          </a>
        );
      })}
    </div>
  );
}
 

Вот как вы могли бы добавить active класс к элементу onClick. a Конечно, проблема с тегами заключается в том, что, я полагаю, они приведут вас на другую страницу. Так что это нужно каким-то образом решить.

Обратите внимание, как я добавил {"#" section} в href. Это для того, чтобы мы могли оставаться на текущей странице.

Вот общая идея: https://codesandbox.io/s/blissful-bush-7n9vf?file=/src/App.js