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

Question

当选定的NavLink处于活动状态时，我想更改列表项的background-color属性。 从我学到的文档中，可以在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类。

在这里查看工作示例

您的父类可能如下所示：

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上的活动路由来更改父导航栏的状态，因为当路由更改时，组件可能会重新安装。