使用React Hooks更改元素类Name和同级

穆罕默德·阿尔纳加威（Mohammed Alngaawy）

我在React hooks中有这个功能组件。当我单击列表中的任何元素以将className更改为“ active”并从其他元素中删除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>
  )
}

佐伊卜·伊亚兹（Zohaib Ijaz）

我希望您必须使用它，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>
      )
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。