如何在React中根据categoryTickets值动态修改工单卡片背景色？

后端为Node.js API，工单数据库返回数值规则：

• 工单状态（开启/关闭）返回0或1
• 工单类型（销售/技术支持）返回0或1
• 是否被管理员已读返回0或1

React项目已正常获取并展示数据，但无法根据item.categoryTickets的值定制工单卡片背景色，现有代码如下：

TicketsHooks #

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { getTicketsList,getTicketsListpage } from "../../../store/actions";
const AllTicketHook = () => {
    const dispatch = useDispatch();

    //to get state from redux
    const { ticketsList, isTicketCreated, error} = useSelector((state) => ({
        ticketsList: state.Tickets.ticketsList,
        isTicketCreated: state.Tickets.isTicketCreated,
        error: state.Tickets.error,
    }));
  
    //when first load
    useEffect(() => {
        const get = async () => {
            await dispatch(getTicketsList());
        }
        get();
    }, [dispatch, isTicketCreated])
       
    //to get page count
    let pageCount = 0;
    try {
        if (ticketsList.paginator)
            pageCount = ticketsList.paginator.pageCount
    } catch (e) { }
    //when press pagination
    const getPage = (page) => {
        dispatch(getTicketsListpage(page));
        console.log(page)
    }
    return [ticketsList, isTicketCreated, pageCount, getPage,error]
};

export default AllTicketHook;

TicketList #

import React from "react";
import { Row,Container } from "reactstrap";
import TicketsListItem from "./ticketsLisCard";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Loader from "../../../Components/Common/Loader";

const TicketsList = ({ data, isTicketCreated, error }) => {
  return (
    <Container fluid={true}>
      <Row>
        {isTicketCreated === false ? (
           data.data  ? (
          data.data.map((item, index) => {
            return (
              <TicketsListItem
                key={index}
                id={item.id}
                category={item.categoryTickets}
                title={item.titleTicket}
                user={item.addedBy}
                listupdate={item.updatedBy}
                Seen={item.isSeen}
                updatedAta={item.updatedAt}
              />
            )
          })
        ) : <h4>No Tickets</h4>
      ) : (<Loader error={error} />)
        }
        <ToastContainer closeButton={false} />
      </Row>
      </Container>
    
  );
};

export default TicketsList;

TicketsListItem #

import React from "react";
import { Col, Container, Row } from 'reactstrap';
import { Link } from "react-router-dom";

const TicketsListItem = ({ id, user, title ,category ,listupdate,Seen,updatedAta}) => {

  const Color = category.status === '2';



  return (
    <div className="page-title-box row border-top-5">
    <Row style={{ backgroundColor: Color ? "#fff3e0" : "white" }}>
            <Link to={`/ticket/${id}`} style={{ textDecoration: 'none' }}>   
            <div className="d-inline col-15  pe-2">{title}</div>
            <div className="d-inline col-14 pe-2">{user}</div>
            <div className="d-inline col-13  pe-2">{listupdate}</div>
            <div className="d-inline pe-2 ">{updatedAta}</div>
            <div className="d-inline pe-2 ">{Seen}</div>
            <div  />
            </Link>

      </Row>
      </div>
  );
};

export default TicketsListItem;

问题出在TicketsListItem的判断逻辑上：

1. 根据后端文档，categoryTickets是直接返回0或1的数值，而非包含status属性的对象，所以category.status未定义，导致判断失效。
2. 后端返回的是数值类型，用字符串'2'判断也不符合规则。

修改TicketsListItem组件，根据categoryTickets的实际数值设置背景色：

import React from "react";
import { Col, Container, Row } from 'reactstrap';
import { Link } from "react-router-dom";

const TicketsListItem = ({ id, user, title, category, listupdate, Seen, updatedAta }) => {
  // 根据category（即categoryTickets）的值设置背景色
  // 示例：0=销售→浅橙色，1=技术支持→浅蓝色，默认白色
  let bgColor = 'white';
  if (category === 0) {
    bgColor = '#fff3e0'; // 销售类工单背景色
  } else if (category === 1) {
    bgColor = '#e3f2fd'; // 技术支持类工单背景色
  }

  return (
    <div className="page-title-box row border-top-5">
      <Row style={{ backgroundColor: bgColor }}>
        <Link to={`/ticket/${id}`} style={{ textDecoration: 'none' }}>   
          <div className="d-inline col-15 pe-2">{title}</div>
          <div className="d-inline col-14 pe-2">{user}</div>
          <div className="d-inline col-13 pe-2">{listupdate}</div>
          <div className="d-inline pe-2">{updatedAta}</div>
          <div className="d-inline pe-2">{Seen}</div>
        </Link>
      </Row>
    </div>
  );
};

export default TicketsListItem;

如果categoryTickets代表工单状态（0=开启，1=关闭），只需调整判断逻辑：

let bgColor = 'white';
if (category === 0) {
  bgColor = '#fff9c4'; // 开启状态背景色
} else if (category === 1) {
  bgColor = '#e8f5e9'; // 关闭状态背景色
}

额外优化建议 #

可以把颜色值定义成CSS类，便于统一维护：

/* 在全局样式或组件样式文件中定义 */
.ticket-sales { background-color: #fff3e0; }
.ticket-support { background-color: #e3f2fd; }

然后在组件中动态添加类名：

const ticketClass = category === 0 ? 'ticket-sales' : category === 1 ? 'ticket-support' : '';

// 在Row标签中使用className
<Row className={ticketClass}>

内容的提问来源于stack exchange，提问作者Serija Nada