Question

<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>

黑色是默认颜色，但如果我想添加第3个条件怎么办？

状态可以被批准＆＃39;，＆＃39;被拒绝＆＃39;，等待＆＃39;或更多。

Answer 1

您可以执行以下操作：

<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>

这意味着如果status === 'approved'将背景颜色设置为蓝色，如果status === 'pending'将其设置为黑色，则将其设置为红色。

Answer 2

如果条件变得复杂，我建议使用函数，以免降低代码的可读性。

getBackgroundColor(status) {
    if (status === 'approved') {
        return 'blue';
    }
    if (status === 'pending') {
        return 'red';
    }
    return 'black';
}

render() {
    // ...

    return (
        <div style={{ 'backgroundColor': this.getBackgroundColor(status) }}></div>
    );
}

Answer 3

我将单独处理它，因为将来可能会出现其他类型的状态。

const getBackgroundColor(status) {
  if (status === 'approved') {
    return 'blue'
  }
  else if (status === 'pending') {
    return 'black'
  } else {
    return 'red'
  }
}

<div style={{'backgroundColor': getBackgroundColor(status) }}>
</div>

代码变得更容易理解和推理。

Answer 4

使用多个三元运算符不是一个好主意，最好使用一个函数并在其中放入if-else条件并从render中调用该函数。它可以帮助您使渲染部分清洁和简短。

像这样：

<div style={{'backgroundColor': this._style(status)}}></div>

_style(status){
    if(status == 'approved')
        return 'blue';
    else if(status == 'pending')
        return 'black';
    else return 'red';
}

Answer 5

要链接三元运算，您需要在不满足条件时添加另一个三元运算符，例如：

a === true ? a : b

代替b，你会添加一个新的三元运算符，如下所示：

a === true ? a : b === true ? b : c

加成：

如果您只是检查null / undefined / false，可以使用管道运算符，例如：

var x = a !== null ? a : b;

可以简化为：

var x = a || b;

管道运营商可以像三元运营商一样无限链接。

Answer 6

还有另一种方法，可以使用更具可读性和更简洁的代码样式来实现。我们可以用对象文字替换三元运算符，并使用它代替嵌套三元运算符，像这样

function getBackgroundColor(status){
  const backgroundColorByStatus = {
    approved: 'blue',
    pending: 'black',
    default: 'red',
  }

  return backgroundColorByStatus[status] || backgroundColorByStatus['default']
}

// somewhere below
<div style={{'backgroundColor': getBackgroundColor(status)}}>fancy div</div>

通过这种方法，您可以使用多种颜色，并且代码仍将保持清晰可读：）

希望这会有所帮助。

Answer 7

JSX 和 JS 中的三元运算符中的多重条件

style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'cancel' ? 'red' : 'green'}}

Answer 8

我不会使用三元，因为它很难阅读。为什么不将状态和相关颜色存储在一个对象中，然后直接引用它？

const colors = {approved:"blue", rejected:"red"};


<div style={{'backgroundColor':status in colors ? colors[status] : "black"}}>
</div>

糟糕，我不知道这个帖子有多老了。

Answer 9

在渲染内部，您可以创建一个空数组变量。如下所示，您可以应用嵌套样式。此外，您不需要嵌套的三元运算符。

let styleValue = [];
if(status === 'approved') {
  styleValue.push({backgroundColor:'blue'})
} else {
  styleValue.push({backgroundColor:'black'})
}

<div style={styleValue}>
</div>

jsx

9 个答案: