React Styled Components条件三元运算符

Question

我正在尝试根据测试的值有条件地设置具有三种不同颜色的框的样式。

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.

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

Answer 1

props => ...只是带有隐式返回的箭头函数，因此您可以为箭头函数指定一个主体，并使用if/ else语句完成所需的操作。

您可以在尝试访问之前先props.data && props.data.test确保props.data已设置test。

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';
  }
}};