从导航栏中的 li 项中添加类/删除类（React）

Question

我正在尝试将“活动”类名动态添加到单击的导航栏项目，并分别从类中删除“活动”类名。我正在使用引导程序，因此“活动”类名称会更改 li 项的颜色。

class NavBar extends React.Component {
  render() {
    return ( 
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog - App</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="/main">Home</a></li>
            <li><a href="/chat">Chat</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar 

我是 React 新手，我需要用函数处理 onClick 吗？我将不胜感激任何想法或代码建议。

Answer 1

在反应中你可以这样做：

通过传入一个决定 className 切换的道具。

const NavBar = props => {
    return ( 
      <nav className="navbar navbar-inverse">
        <div class="container-fluid">
          <div className="navbar-header">
            <Link className="navbar-brand">Blog - App</Link>
          </div>
          <ul className="nav navbar-nav">
            <li className={props.active ? 'active' : ''}><Link to="/main">Home</Link></li>
            <li><Link to="/chat">Chat</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </nav>
    );
};

export default NavBar 

按州 但是在这种情况下就不合适了，因为没有任何东西会点击它。

import {useState} from 'react';
const NavBar = () => {
  const [active, setActive] = useState('');
  clickToChange () {
   setActive(true);
  }
  render() {
    return ( 
      <nav className="navbar navbar-inverse">
        <div class="container-fluid">
          <div className="navbar-header">
            <Link className="navbar-brand">Blog - App</Link>
          </div>
          <ul className="nav navbar-nav">
            <li className={state.active ? 'active' : ''}><Link to="/main">Home</Link></li>
            <li><Link to="/chat">Chat</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar 

在您的特定用例中，我可能会建议改为检测路线

请参见此处的示例： React Router v4 - How to get current route?

Answer 2

是的，您可以使用 onClick 处理程序，但是您必须再次从 window.location 重新水化它；

class NavBar extends React.Component {

  render() {
    state = { active : null }
    
    componentDidMount(){
       /** you might as well check if location.pathname includes what you are looking 
        for before just setting it to state, assuming that there wont be anything 
        extra; skipping that for simplicity*/
       this.setState(window.location.pathname);
     }
   
    handleClick = (activeLink) => {
       this.setState(activeLink);
     }
    
    return ( 
      <nav className="navbar navbar-inverse">
        <div className="container-fluid">
          <div className="navbar-header">
            <a className="navbar-brand" href="#">Blog - App</a>
          </div>
          <ul className="nav navbar-nav">
            <li onClick={()=>this.handleClick('/main')} className={`{this.state.active==='/main'? 'active':''}`}><a href="/main">Home</a></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar 

更优雅的实现是使用客户端路由库，如 react-router，它为您提供 Link 组件，如 NavLink，它会自动附加活动的类名。