javascript - 使用 React Hooks 更改元素类名称和 sibling

Question

我在 react 钩子(Hook)中有这个功能组件。
并且当我单击列表中的任何元素时需要将 className 更改为“事件”
并从其他元素中删除 className

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>
      )
    }