используйте React Hooks для изменения имени класса элементов и родных элементов

Question

У меня есть этот компонент функции в ответных хуках. и нужно, когда я нажимаю на любой элемент в списке, чтобы изменить имя_класса на 'активный' и удалить имя_класса из других элементов

const SideBar = () =>{
  const [activeClass, setClass] = useState('');

  return (
    <div className="sidebar">
      <ul>
        <li> <Link onClick={() => setClass('active')} className={activeClass} to="/"> Home </Link> </li>
        <li> <Link to="/about"> About </Link> </li>
        <li> <Link to="/form"> Form </Link> </li>
      </ul>
    </div>
  )
}

Answer 1

Надеюсь, вы используете react-router-dom, поэтому вы можете использовать rect-router-dom api для определения активного элемента

import {
  useLocation
} from "react-router-dom";

const SideBar = () =>{
  const [activeClass, setClass] = useState('');
  let { pathname } = useLocation();

  return (
    <div className="sidebar">
      <ul>
        <li> <Link className={pathname === '/' ? 'active' : ''} to="/"> Home </Link> </li>
        <li> <Link to="/about" className={pathname === '/about' ? 'active' : ''}> About </Link> </li>
        <li> <Link to="/form" className={pathname === '/form' ? 'active' : ''}> Form </Link> </li>
      </ul>
    </div>
  )
}

import { NavLink } from 'react-router-dom';

const SideBar = () => {
      const isActive = path => (match, location) => {
        if (!match) {
          return false;
        }
        return match.url === path;
      };

      return (
        <div className="sidebar">
          <ul>
            <li> <NavLink isActive={isActive('/')} activeClassName="active" to="/"> Home </NavLink> </li>
            <li> <NavLink to="/about" isActive={isActive('/about')} activeClassName="active"> About </NavLink> </li>
            <li> <NavLink to="/form" isActive={isActive('/form')} activeClassName="active" > Form </NavLink> </li>
          </ul>
        </div>
      )
    }

Answer 2

Таким образом, вместо того, чтобы поддерживать только активный / не активный, вам нужно указать, какой index в ваших ссылках активен.

Вы можете сделать это следующим образом:

const SideBar = () =>{

  //setting the initial index as 0 to activate `/` route by default.
  const [activeLinkIndex, setActiveLinkIndex] = useState(0);

  return (
    <div className="sidebar">
      <ul>
        <li> <Link onClick={() => setActiveLinkIndex(0)} className={activeLinkIndex === 0 ? 'active' : ''} to="/"> Home </Link> </li>
        <li> <Link onClick={() => setActiveLinkIndex(1)} className={activeLinkIndex === 1 ? 'active' : ''} to="/about"> About </Link> </li>
        <li> <Link onClick={() => setActiveLinkIndex(2)} className={activeLinkIndex === 2 ? 'active' : ''} to="/form"> Form </Link> </li>
      </ul>
    </div>
  )
}