javascript jsx中三元运算符中的多个条件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46408983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multiple condition in ternary operator in jsx
提问by Jenny Mok
<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>
black is the default color but what if I want to add the 3rd condition?
黑色是默认颜色，但如果我想添加第三个条件怎么办？
status can be 'approved', 'rejected', 'pending' or more.
状态可以是“已批准”、“已拒绝”、“待定”或更多。
回答by Paul Fitzgerald
You could do the following:
您可以执行以下操作：
<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>
This means if status === 'approved'set the background color as blue, if status === 'pending'set it as black, else set it as red.
这意味着如果status === 'approved'将背景颜色设置为蓝色，如果status === 'pending'将其设置为黑色，则将其设置为红色。
回答by Ghassen Louhaichi
I would suggest using functions if your conditions get complicated, to not degrade your code readability.
如果您的条件变得复杂，我建议您使用函数，以免降低您的代码可读性。
getBackgroundColor(status) {
if (status === 'approved') {
return 'blue';
}
if (status === 'pending') {
return 'red';
}
return 'black';
}
render() {
// ...
return (
<div style={{ 'backgroundColor': this.getBackgroundColor(status) }}></div>
);
}
回答by mersocarlin
I'd handle it separately as other types of status may appear in the future.
我会单独处理它，因为将来可能会出现其他类型的状态。
const getBackgroundColor(status) {
if (status === 'approved') {
return 'blue'
}
else if (status === 'pending') {
return 'black'
} else {
return 'red'
}
}
<div style={{'backgroundColor': getBackgroundColor(status) }}>
</div>
Code gets easier to understand and reason about.
代码变得更容易理解和推理。
回答by Mayank Shukla
Using multiple ternary operators is not a good idea, better to use a function and put if-else conditions inside that and call that function from render. It helps you to make the render part clean and short.
使用多个三元运算符不是一个好主意，最好使用一个函数并将 if-else 条件放在其中并从渲染调用该函数。它可以帮助您使渲染部分干净而简短。
Like this:
像这样：
<div style={{'backgroundColor': this._style(status)}}></div>
_style(status){
if(status == 'approved')
return 'blue';
else if(status == 'pending')
return 'black';
else return 'red';
}
回答by Dom
To chain ternary operations you need to add another ternary operator to be returned when the conditions are not met, for example:
要链接三元运算，您需要添加另一个三元运算符以在不满足条件时返回，例如：
a === true ? a : b
a === true ? a : b
In place of byou would add a new ternary operator, like so:
代替b您添加一个新的三元运算符，如下所示：
a === true ? a : b === true ? b : c
a === true ? a : b === true ? b : c
Bonus:
奖金：
When you're just checking for null/undefined/false you can use the pipe operator, for example this:
当您只是检查 null/undefined/false 时，您可以使用管道运算符，例如：
var x = a !== null ? a : b;
var x = a !== null ? a : b;
Can be simplified to:
可以简化为：
var x = a || b;
var x = a || b;
And pipe operators can be chained infinitely like ternary operators.
管道运算符可以像三元运算符一样无限链接。
回答by The Reason
There is another way how to do it with the a bit more readable & cleaner code style. We can replace the ternary operator with the object literal and use this instead of nesting ternary operators, like so
还有另一种方法可以使用更具可读性和更清晰的代码风格来做到这一点。我们可以用对象字面量替换三元运算符，并使用它代替嵌套三元运算符，就像这样
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>
With this approach you can have multiple colors and code will be still clean & readable :)
使用这种方法，您可以拥有多种颜色，并且代码仍然干净且可读:)
Hope it will help.
希望它会有所帮助。
