React中的阵列循环的响应值

Question

我想根据响应的值显示颜色。 来自响应的数据>

如果优先级很高，则卡颜色为红色，并且优先级低的卡颜色将为绿色

<a style={{ background: 'red' }}>{el.priority}</a>

我将如何实现：

{el.priority.high}
{el.priority.low}
{el.priority.mild}
{el.priority.blocker}

Answer 1

@Aman的答案是正确的。如果背景属性不起作用。您可以更具体地使用backgrowdColor进行操作

<a style={{ backgroundColor: el.priority === "high" ? "red" : "green" }}>{el.priority}</a>

，并且如果优先级超过2个值，则可以在每种类型上映射颜色，并且使用索引操作员从对象中获取颜色，

const bgColors = { 
            high: 'red', 
            low: 'green', 
            medium: 'yellow', 
            none: 'black', 
            default: 'blue'
};

<a style={{ backgroundColor: bgColors[el.priority] }}>{el.priority}</a>

即建议使用链接从<<<<代码> react-native 或@react-navigation/本机而不是计划锚标签。纯锚标签应仅用于绝对路径。

Answer 2

您需要使用条件渲染

 <a style={{ background: el.priority === "high" ? "red" : "green" }}>{el.priority}</a>