React中三元运算符多条件判断问题：路由样式切换失效求助

需求说明 #

• 处于/teacher-add-course/description路由时，元素显示橙色；
• 处于/teacher-add-course路由时，元素显示白色；
• 处于其他路由时，元素显示绿色。

问题描述 #

使用三元运算符编写条件判断后，仅前两个路由的样式生效，其他路由的样式无法正常渲染。

原实现代码 #

import React from 'react';
import { FaBookOpen } from 'react-icons/fa';
import { Link, useLocation } from 'react-router-dom';
import '../../asset/css/Teachers-overview/TeachersDashboardSidebar.css'

const TeachersDashboardSidebar = () => {
    let location = useLocation()
    console.log(location.pathname);
    return (
        <div className='sidebar-container'>
            <div className='sidebar-content-wrapper'>
                <div className='overview-wrapper'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className= {`${location.pathname=== '/teacher-add-course'? 'progress-book-icon bg-orange':'progress-book-icon bg-complete'}`}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course"><span className="text-semilight font-weight-bold mt-2 ml-3">Overview</span></Link>
                </div>
                <div className='bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className={`${location.pathname=== '/teacher-add-course/description'?'bg-orange':'teacher-add-course'?'progress-book-icon':'bg-complete'} `}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course/description'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course/description"><span className="text-semilight font-weight-bold mt-2 ml-3">Description</span></Link>
                </div>
                <div className='text-warning bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className={`${location.pathname=== '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course/requirements'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course/requirements"><span className="text-semilight font-weight-bold mt-2 ml-3">Requirements</span></Link>
                </div>
            </div>
        </div>
    );
};

export default TeachersDashboardSidebar;

问题分析 #

你的代码里存在三元运算符语法错误，导致条件判断逻辑完全失效：

1. 第二个侧边栏项的className写法逻辑混乱：

   `${location.pathname=== '/teacher-add-course/description'?'bg-orange':'teacher-add-course'?'progress-book-icon':'bg-complete'} `
   

   这里'teacher-add-course'是字符串常量，布尔判断中永远为true，所以无论路由是什么，都会返回'progress-book-icon'，完全不符合需求逻辑。

2. 第三个侧边栏项的三元嵌套优先级错误：

   `${location.pathname=== '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`
   

   嵌套三元未用括号明确优先级，逻辑会混乱，且没有覆盖“其他路由”的绿色样式分支。

修正后的代码 #

我们可以把样式判断逻辑封装成工具函数，避免语法错误同时提升代码可读性：

import React from 'react';
import { FaBookOpen } from 'react-icons/fa';
import { Link, useLocation } from 'react-router-dom';
import '../../asset/css/Teachers-overview/TeachersDashboardSidebar.css'

const TeachersDashboardSidebar = () => {
    const location = useLocation();
    const pathname = location.pathname;

    // 获取图标容器的样式类名
    const getIconClass = () => {
        if (pathname === '/teacher-add-course/description') {
            return 'progress-book-icon bg-orange';
        } else if (pathname === '/teacher-add-course') {
            return 'progress-book-icon bg-white'; // 替换为你实际的白色样式类
        } else {
            return 'progress-book-icon bg-complete'; // bg-complete对应绿色
        }
    };

    // 获取蜡烛元素的样式类名
    const getCandleClass = (targetRoute) => {
        return pathname === targetRoute ? 'candle-basic' : 'candle-success';
    };

    return (
        <div className='sidebar-container'>
            <div className='sidebar-content-wrapper'>
                <div className='overview-wrapper'>
                    <div className='d-flex flex-column align-items-center'>
                        <div className={getIconClass()}>
                            <FaBookOpen className="text-white " />
                        </div>
                        <div className={getCandleClass('/teacher-add-course')}></div>
                    </div>
                    <Link to="/teacher-add-course">
                        <span className="text-semilight font-weight-bold mt-2 ml-3">Overview</span>
                    </Link>
                </div>
                <div className='bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                        <div className={getIconClass()}>
                            <FaBookOpen className="text-white " />
                        </div>
                        <div className={getCandleClass('/teacher-add-course/description')}></div>
                    </div>
                    <Link to="/teacher-add-course/description">
                        <span className="text-semilight font-weight-bold mt-2 ml-3">Description</span>
                    </Link>
                </div>
                <div className='text-warning bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                        <div className={getIconClass()}>
                            <FaBookOpen className="text-white " />
                        </div>
                        <div className={getCandleClass('/teacher-add-course/requirements')}></div>
                    </div>
                    <Link to="/teacher-add-course/requirements">
                        <span className="text-semilight font-weight-bold mt-2 ml-3">Requirements</span>
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default TeachersDashboardSidebar;

关键修正点 #

1. 提取getIconClass和getCandleClass工具函数，集中管理样式判断逻辑，避免重复代码和语法错误；
2. 明确三个路由场景的样式分支：/teacher-add-course/description（橙色）、/teacher-add-course（白色）、其他路由（绿色）；
3. 修复原代码中三元运算符的语法错误，确保每个条件判断符合预期逻辑。

如果你的白色样式类不是bg-white，请替换为项目中实际的类名。

内容的提问来源于stack exchange，提问作者Mehedi Hasan