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