2

我是反应的新手。我开发了一个简单的应用程序，它以网格视图显示数据库中的数据。在这里，我想根据从数据库获得的优先级为不同的网格项添加不同的背景颜色。存储在数据库中的优先级为“高、中、低”。这些级别显示在<p>标签内的每个网格项目中。

我在下面附上了示例输出图像。因此，基于<p>高/中/低的标记值，我想更改网格项的背景颜色。这样具有 "high = is in read" 、 "medium = yellow" 和 "low = green" 的项目输出：前端图片

代码：Ticket.js

import React, { useEffect, useState } from "react";
import GridWrapper from "../helpers/gridWrapper"
import { getTickets } from "../redux/actions/ticketAction";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import  "./stylesheets/Ticket.css";
import ContentWrapper from "../helpers/contentWrapper";



const Tickets = () => {


  const [tickets, setTicket] = useState("");
 
  // //for ticket retrieval

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTickets());
  }, [dispatch]);
  const { ticket } = useSelector(state => state.ticket);

  //defining keys for priority
  const [state, setState] = useState({
    //creating 3 columns
    "high": {
    },
    "medium": {
    },
    "low": {
    }
  })

  return (
    <GridWrapper>
      <p>Tickets Component</p>
      <div className="grid_list">
 
        {ticket.map((tickets,key) => (
           
           <ContentWrapper className="card" >
    

          <p style={{fontSize:"20px" , fontWeight:"bold", color:"#5c5c5c"}}>{tickets.ticketTitle}</p>
          <hr style={{marginTop:"-18px"}}></hr>
           <p className="contain">{tickets.priority}</p> 
          <button class="button">send</button>
    
          </ContentWrapper>
        ))
        }
      

      </div>
    </GridWrapper>
    );
};

export default Tickets;

css 文件

.grid_list {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width:70%;
  }

  .card{
  border-radius:-10px;
  text-align: center;
 
  }
  .button{
    background: linear-gradient(to right, #0467e9, #009ffd);
    border-radius: 20px;
    padding:2px 2px 6px 2px ;
    color:white;
    border: none;
    height:55%;
    width:20%;
    margin-left: 250px;
    float:right;
    align-items: center;
    justify-content: center;
    margin-top:5%;
  }
4

1 回答 1

1

如果我正确理解了您的问题，您可以为<p>标签动态分配样式/类：

const getPriorityColor = (priority) => {
  if(priority === "high") return {color: "red"}
  else if(priortiy === "medium") return {color: "yellow"}
  else return {color: "green"} 
}

return(
...
<p className="contain" style={getPriorityColor(tickets.priority)}>{tickets.priority}</p> 
...)

注意：ticket.map(tickets... 真的很混乱。我会使用 ticket.map(ticket...

于 2021-08-19T06:31:49.270 回答