Question

我有多个<li>，并希望将className =“ active”设置为被单击的那个。但请记住，我将把href称为其他路线。现在，假设所有li上的路线都相同。

以下是代码：

import React, { Component } from 'react';

class Sidebar extends Component{
render(){
    return(
            <aside className="main_sidebar">
                    <ul >
                        <li title="Home" className="active"><a href="/dashboard"><i className="fa fa-home "></i></a></li>
                        <li title="Irrigation Pump"><a href="/dashboard"><i className="fa fa-battery-2"></i></a></li>
                        <li title="Drinking Water"><a href="/dashboard"><i className="fa fa-truck"></i></a></li>
                        <li title="Patvan"><a href="/dashboard"><i className="fa fa-bicycle"></i></a></li>
                        <li title="Rooftop"><a href="/dashboard"><i className="fa fa-sun-o"></i></a></li>
                    </ul>
                </aside>
        )
}
}

export default Sidebar;

下面的img显示了应用于<li>的css。

谢谢。

Answer 1

在这种情况下，您可以使用 react-router-dom 中的<NavLink/>，其中有一个名为 activeClassName 的道具，接受您要申请有效链接的 CSS ClassName ，它由NavLink自动管理。

这是可重复使用的包装器组件的示例代码，您可以在具有 props

的链接中传递该链接

import React from 'react';
import { NavLink } from 'react-router-dom';

import classes from './NavigationItem.css';

const navigationItem = ( props ) => (
    <li title="Home" className="active">
        <NavLink 
            to={props.link}
            activeClassName={classes.active}>{props.children}</NavLink>
    </li>
);

export default navigationItem;

可以像这样食用

import React from 'react';

import classes from './NavigationItems.css';
import NavigationItem from './NavigationItem/NavigationItem';

const navigationItems = () => (
    <aside className="main_sidebar">
       <ul className={classes.NavigationItems}>
           <NavigationItem link="/" exact>Burger Builder</NavigationItem>
           <NavigationItem link="/orders">Orders</NavigationItem>
           <NavigationItem link="/Auth">Auth</NavigationItem>
       </ul>
 </aside>
);

export default navigationItems;

注意：：在我的activeClassName代码中，我正在使用CSS模块，请随时进行更改！

如何使用多个<li>选项切换类名称？

1 个答案: