reactjs - 如何用多个切换类名选项？

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>.

谢谢。

标签： reactjs

Answer 1

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

这是一个可重用包装组件的示例代码，您可以将链接传递给 has 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 模块，但请随意更改它！