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

Question

当所选的 NavLink 处于事件状态时，我想更改列表项的背景颜色属性。从我了解到的文档中，为了向 NavLink 添加一个额外的类，当它处于事件状态时，我可以使用 activeClassName Prop ，为了制作我想要的东西，我需要一个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 上的事件路由更改父导航栏的状态，因为组件可能会在路由更改时重新挂载。