Reactjs 反应式成分条件三元运算符

我试图根据测试的值，有条件地用三种不同的颜色来设计一个框

if test = A or B, it needs to be yellow
if test = C, it needs to be green,
if test = anything else, it needs to be blue.

---

我宁愿编写一个开关或if/else，但我不知道是否可以不使用带有样式化组件的三元运算符。

props=>…

只是一个带有隐式返回的箭头函数，因此您可以给箭头函数一个主体，并使用

if

/

else

语句完成您想要的操作

您可以使用

props.data&&props.data.test

确保在尝试访问

test

之前设置了

props.data

color: ${props => {
  const test = props.data && props.data.test;

  if (test === 'A' || test === 'B') {
    return 'yellow';
  } else if (test === 'C') {
    return 'green';
  } else {
    return 'blue';
  }
}};

---

你能发布你的组件吗？我不知道你能在样式化组件内部处理这个问题，我认为这只是简单的三值真/假。谢谢你扩展了我的视野。在设置颜色之前，我如何将

数据
放入道具中？