如何使用NextJS和TailwindCSS根据值更改背景颜色

Question

我有一个表，显示API中的值。我想根据收到的request.status值更改状态字段的背景

我总共有4个状态值

• 已完成
• 正在进行的工作
• 待启动
• 等待客户确认

对此最好的方法是什么？

export default function RequestPage() {
const [requests, setRequest] = useState([]);
useEffect(() => {
const fetchRequests = async () => {
const res = await fetch('/api/requests');
const data = await res.json();
console.log(data);
setRequest(data);
};
fetchRequests();
}, [setRequest]);
return (
{requests.map((request) => {
return (
<span aria-hidden="true" className="absolute inset-0 opacity-50 rounded-full bg-green-200"></span>
<span className="relative">{request.status}</span>
)}
})

我在用打字稿。这是我做的第一个打字项目。

Answer 1

您可以定义一个代表背景色类的bgColor变量，并根据request.status:进行更改

{
requests.map((request) => {
let bgColor = '';
switch (request.status) {
case 'Completed': 
bgColor = 'bg-green-200';
break;
case ...
}
return (
<>
<span
aria-hidden='true'
className={`absolute inset-0 opacity-50 rounded-full ${bgColor}`}
></span>
<span className='relative'>{request.status}</span>
</>
);
});
}