如何在 react.js 中的网格布局中为不同的网格项目提供不同的背景颜色

Question

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

我在下面附上了示例输出图像。因此，基于 <p> 标签值 high/medium/low，我想更改网格项的背景颜色。这样具有“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%;
  }

Answer 1

如果我没有正确理解你的问题，你可以将 style/class 动态分配给 <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...真的很混乱。我会用tickets.map(ticket...

如何在 react.js 中的网格布局中为不同的网格项目提供不同的背景颜色

How to give different background colors for different grid items in grid Layout in react.js

css

reactjs

gridview