在反应中动态切换类？答案

【问题标题】：toggling class dynamically in react?在反应中动态切换类？
【发布时间】：2021-07-28 18:04:03
【问题描述】：

我正在开发一个带有两个按钮的标题组件的 React 应用程序：

import React, { useRef } from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header className='header'>
      <h2 className='resume-title'>
        Muhammad <br />
        Sohaib Furqan
      </h2>
      <button className='btn'>
        <Link to='/'>Home</Link>
      </button>
      <button className='btn'>
        <Link to='/projects'>Projects</Link>
      </button>
    </header>
  );
};

我想让被点击的按钮获得“活动”类，而其他按钮被删除“活动”类。在 vanillaJS 中，我会使用“querySelectorAll”来获取所有按钮，然后通过 nodeList 进行映射，并根据需要进行切换。但不确定我将如何在 React 中做到这一点。我倾向于 useRef 但如何将 ref 设置为指向被点击的按钮？

希望我已经设法让自己说清楚了。

TIA, 苏海布

【问题讨论】：

删除按钮并将 btn 类添加到链接。然后处理 activeClassName。
您可以只使用来自react-router-dom 的NavLink 组件。当路径匹配时，它会得到一个类.active

标签： javascript reactjs react-hooks

【解决方案1】：

见NavLink。

你可以像这样使用它

<NavLink className="btn" to='/'>Home</Link>

当路径匹配时，NavLink 将获得.active 类。因此，您可以将样式添加到 active 类。

您还可以使用自定义类名

<NavLink to="/" activeClassName="some-custom-class">
 Home
</NavLink>

【讨论】：

【解决方案2】：

<Link> 不再具有 activeClassName 或 activeStyle 属性。在react-router v4 中，如果你想做条件样式，你必须使用<NavLink>：

import React, { useRef } from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
  return (
    <header className='header'>
      <h2 className='resume-title'>
        Muhammad <br />
        Sohaib Furqan
      </h2>
      <NavLink to='/' className="btn" activeClassName="active">Home</Link>
      <NavLink to='/projects' className="btn" activeClassName="active">Projects</Link>
    </header>
  );
};

在你的style.css

.active { //do-whatever }

【讨论】：

【解决方案3】：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  const [active,setActive] = useState("Home")
  const handleActive = (activeTab) => {
     setActive(activeTab)
  }
  return (
    <header className='header'>
      <h2 className='resume-title'>
        Muhammad <br />
        Sohaib Furqan
      </h2>
      <button className={active === "Home" ? 'btn active' : 'btn' } onClick={() => handleActive("Home")} >
        <Link to='/'>Home</Link>
      </button>
      <button className={active === "Projects" ? 'btn active' : 'btn' } onClick={() => handleActive("Projects")} >
        <Link to='/projects'>Projects</Link>
      </button>
    </header>
  );
};

【讨论】：