我正在try 在Reaction路由的帮助下改变基于路由的样式.所以我希望描述路径在用户处于描述路径时为橙色,当用户在教师添加课程路径中时为白色,当在其他路径时为绿色,但当我在其他路径时我的最后条件是不渲染.我已经用三元运算符try 了这些条件.有人能帮忙吗?

我试过用三元运算符&编写条件,当我在教师-添加-课程路径&描述路径时,它起作用,但当我在其他路径,如要求,该条件不适用.

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;

推荐答案

您需要写出每个分支的整个比较.

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

注意,这里不需要模板文字;您可以直接将条件运算符的结果传递给className.

Javascript相关问答推荐

手机上的渲染错误文本必须在文本组件中渲染,但在浏览器上没有问题<><>

显示图—如何在图例项上添加删除线效果?

如何从隐藏/显示中删除其中一个点击?

如何在JavaScript文件中使用Json文件

为什么我的自定义元素没有被垃圾回收?

在不删除代码的情况下禁用Java弹出功能WordPress

AddEventListner,按键事件不工作

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

在D3条形图中对具有相同X值的多条记录进行分组

与在编剧中具有动态价值的定位器交互

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

在单击按钮时生成多个表单时的处理状态

如果查询为空,则MongoDB将所有文档与$in匹配

使用VITE开发服务器处理错误

我如何才能阻止我的球数以指数方式添加到我的HTML画布中?

按下键盘上的空格键后,单词就会变色.我想在最后一封信之后立即给它们涂上 colored颜色

在Java脚本/类型脚本中覆盖父构造函数中的默认值

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态

如何限制调整最小高度并转换为纯Java脚本

如何 Select 名称正在更改的DOM元素