将有条件的UI更改放在类本身中是好做法吗?

Question

这个类实际上在颜色上做了一些改变。如果值是活动的，那么，它将显示一些彩色文本，并且背景与其他值(如拒绝、取消、过期、挂起)的逻辑相同。这样写有那么好吗?还是有其他的写法?当看到这个时，它可能会像🤮

className={`
${cell.row.original.invite_status === "active" && "bg-green-50 text-success" }
${cell.row.original.invite_status === "pending" && "bg-yellow-50 text-yellow-400"}
${cell.row.original.invite_status === "expired" && "bg-slate-50 text-slate-400" }
${cell.row.original.invite_status === "rejected" && "bg-purple-50 text-purple-500 mr-44" }
${cell.row.original.invite_status === "cancelled" && "bg-red-50 text-red-500 mr-44" }
ml-14 px-4 py-1 font-medium rounded-md mr-4
`}

Answer 1

很难读，也不是很清楚，所以使用这样的方法:

function getInviteClass(invite_status) {
switch(invite_status) {
case 'active': return 'bg-green-50 text-success';
case 'pending': return 'bg-yellow-50 text-yellow-400';
case 'expired': return 'bg-slate-50 text-slate-400';
case 'rejected': return 'bg-purple-50 text-purple-500 mr-44';
case 'cancelled': return 'bg-red-50 text-red-500 mr-44';
}
}

你可以把它移到控制器中，这样就干净多了:

className={`${ getInviteClass(cell.row.original.invite_status) } ml-14 px-4 py-1 font-medium rounded-md mr-4`}