如何在 React.js 中更改 <NavLink> 标签的父元素的样式？

Question

当所选的 NavLink 处于活动状态时，我想更改列表项的背景颜色属性。从我了解到的文档中，为了向 NavLink 添加一个额外的类，当它处于活动状态时，我可以使用 activeClassName 道具来制作我想要的东西，我需要一个css中的父选择器，不存在。

当NavLink标签有活动类时，如何选择父元素？

我只需要具有活动子 NavLink 的列表项上的绿色背景。

<ul className="navbar-nav">
        <li className="navItem">
           <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/" exact>about</NavLink>
        </li>
        <li className="navItem">
           <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/services">services</NavLink>
        </li>
        <li className="navItem">
           <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/contacts">contacts</NavLink>
        </li>
</ul>

Answer 1

最直接的方法可能是将状态应用于您的父元素以实现此效果，即可以代表您父级的 CSS 类的名称。您可以根据活动路由或单击的项目更改此状态以应用新的 CSS 类。

See working example here

您的父类可能如下所示：

import React from 'react'
import NavLink from './NavLink'

class Navbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      navbarClass: "navbar"
    }
  }

  setBgClass (title) {
    this.setState({
      navbarClass: `navbar navbar-${title}`
    })  
  }

  render() {
    return (
      <div className={this.state.navbarClass}>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('about')} 
          href='/about/'>
            About
        </button>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('services')} 
          href='/services/'>
            Services
        </button>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('contact')} 
          href='/contact/'>
            Contact
        </button>

    </div>
    );
  }
}

export default Navbar

之后，您只需在组件样式表中定义适当的 CSS 类：

.navbar-about { background: green; }
.navbar-services { background: blue; }
.navbar-contact { background: orange; }

注意： 如果您在应用程序中调用实际路由，即使用react-router，您可能希望根据componentDidMount 而不是onClick 上的活动路由更改父导航栏的状态，因为当路由更改时组件可能会重新挂载。