Question

任何人都可以告诉我在反应对象中使用if .. else .. condition的替代方法

const background = {
    color: {
      if ( this.props.status == 'broker') {
        background : '#FFFFFF'
      } esle {
        background : 'green'
      }
    }
}

Answer 1

你可以使用三元：

const background = {
    color: this.props.status === 'broker' ? '#ffffff' : 'green'
}

如果您想要更多条件，这可能会受到限制和/或难以阅读，因此您也可以使其发挥作用，但您只需要注意调用它的方式/位置：

const background = {
    color: function() {
      let color

      if(this.props.status === 'broker') {
        color = '#ffffff'
      } else {
        color = 'green'
      }

      return color
    }
}

Answer 2

您不需要全部内联评估。嵌套的三元语句可能会非常难看。你可以创建一个函数并将结果传递给：

function bgColor(status) {
  if (status === 'broker') {
    return { background: '#fff' }
  }

  if (status === 'whatever' {
    // return ...
  }

  // whatever else
}

const background = {
  color: bgColor(this.props.status)
}

如何在反应对象内使用if else条件

2 个答案: