在反应中动态切换类？

Question

我正在开发一个 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，索海布

Answer 1

请参阅导航链接。

你可以像这样使用它

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

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

您还可以使用自定义 className

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

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

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