你如何在 React 和 CSS 中设置一个“活动”类？答案

【问题标题】：How do you set an 'active' class in React and CSS?你如何在 React 和 CSS 中设置一个“活动”类？
【发布时间】：2020-02-16 01:10:38
【问题描述】：

我的 React 应用中有导航。但是，如果在该页面上，我希望更改导航的颜色。

这是我的代码，我已向项目添加了一个活动的类名。

        <Link to='/'>
          <li className='menu-list-item menu-list-logo   active'>Gatsby's</li>
        </Link>
        <Link to='/drink'>
          <li className='menu-list-item active'>Drink</li>
        </Link>
        <Link to='/food'>
          <li className='menu-list-item active'>Food</li>
        </Link>
        <Link to='contact'>
          <li className='menu-list-item active'>Contact</li>
        </Link>

导航链接当前的背景为黑色。我想让颜色变成红色。 P.S 我使用的是标准 CSS 样式。

【问题讨论】：

如果您使用我假设您只是使用<NavLink> 而不是<Link> 的反应路由器，它将为您添加活动类reacttraining.com/react-router/web/api/NavLink

标签： reactjs react-hooks

【解决方案1】：

react router的NavLink里面其实有一个activeClassName的属性。

事情是这样的

Import { NavLink } from 'react-router-dom`
...

<NavLink exact activeClassName="your_active_css_classname" className="normal_css">Link name </NavLink>

不要忘记添加确切的。在这里阅读更多：https://reacttraining.com/react-router/web/api/NavLink

【讨论】：

【解决方案2】：

轻巧/快速的方法是更改这些 <Link> 元素的父 DOM 元素处的类...从那里 CSS 将尽其所能。

假设这些<Link> ... </Link> 标记包含在<nav> ... </nav> 标记内，这是父DOM 元素。

{ (onThePage) ? <nav className="onThePageClass"> ... </nav> : <nav className="normalClass"> ... </nav> }

如果您遇到困难，请尝试此 else share MVCE，以便为寻求帮助的其他人提供一个很好的示例

【讨论】：