使用 React Hooks 更改元素类名称和兄弟姐妹

Posted 2023-03-16

【中文标题】使用 React Hooks 更改元素类名称和兄弟姐妹

【英文标题】：use React Hooks to change the elements class Name and siblings

【发布时间】：2020-06-30 14:18:50

【问题描述】：

我在反应钩子中有这个功能组件。 并且当我单击列表中的任何元素时需要将 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>
  )

【参考方案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>
      )
    

【讨论】：

我不知道第 2 节，但您的第 1 节解决方案效果很好，谢谢 :)

第 2 节使用 react-router-dom 也是有效的，但是，我不能 100% 确定匹配对象 match.url 中 url 的属性名称。但第一种解决方案简单易懂

【参考方案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>
  )

【讨论】：

在这种情况下，请将其标记为正确答案。很高兴它帮助了你:)

这里出了点问题..当用户刷新页面并且他在“表单”页面中..活动类将在“主页”中我打赌用户在表单页面中

是的，当用户刷新应用程序时，这不会持续存在。 Zohaib Ijaz 的上述回答适用于这种情况:)