jsx中三元运算符中的多个条件答案

【问题标题】：multiple condition in ternary operator in jsxjsx中三元运算符中的多个条件
【发布时间】：2018-03-06 15:30:21
【问题描述】：

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

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

状态可以是“已批准”、“已拒绝”、“待定”或更多。

【问题讨论】：

真的，如果你有两个可能的结果，你应该只使用三元。您可以“链接”三元组以添加更多可能的结果，但它往往会很快变得混乱。只需使用if。
不要在 JSX 中处理所有事情。我会编写一个根据状态返回正确颜色的函数，并从 JSX 调用该函数。
Multiple Ternary Operators的可能重复

标签： javascript reactjs jsx

【解决方案1】：

您可以执行以下操作：

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

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

【讨论】：

【解决方案2】：

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

像这样：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

render() {
    // ...

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

【讨论】：

像其他一些答案所暗示的那样链接三元语句是绝对不可读的，也是一种糟糕的做法。这个解决方案很明确，应该是公认的答案。

【解决方案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;

管道运算符可以像三元运算符一样无限链接。

【讨论】：

在第二个条件下，三元运算符是如何工作的？

【解决方案6】：

还有另一种方法可以使用更具可读性和更简洁的代码风格。我们可以将三元运算符替换为对象字面量，并使用 this 代替嵌套三元运算符，就像这样

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>

使用这种方法，您可以拥有多种颜色，并且代码仍然清晰可读:)

希望它会有所帮助。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

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


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

哎呀，我不知道这个帖子有多老了。

【讨论】：