Question

Navbar

当选定的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类。

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

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

1 个答案: