[英]Ternary Operator alternatives for more than 2 values
In my react-native applications, i had written a code like this. 在我的react-native应用程序中,我编写了这样的代码。
return (
<PersonHandler
profilePicture={item.user.profileImage ? {uri: item.user.profileImage} : DefaultUser}
firstName={item.user.firstName}
lastName={item.user.lastName}
buttonBorderColor={item.status === 0 ? "#000000" : "#37CAFA"}
buttonBackgroundColor={item.status === 0 ? null : "#37CAFA"}
buttonTextColor={item.status === 0 ? "#000000" : "#FFFFFF"}
buttonText={item.status === 0 ? USER_STATUS.REQUESTED : USER_STATUS.FOLLOWING}
submitting={unfollowIsInProgress && item._id === unfollowingPerson._id}
onButtonPress={() => this.onUnfollowPress(item)}
/>
);
Now I have more than 2 statuses to handle, so the ternary operator here cannot be used. 现在我有两种以上的状态要处理,因此这里的三元运算符不能使用。 What will be the best approach to handle a situation like this?
处理这种情况的最佳方法是什么?
I have 3 statuses now. 我现在有3种状态。 0, 1 and 2. According to the status I have to handle the following conditions.
0,1和2.根据状态我必须处理以下条件。
buttonBorderColor={item.status === 0 ? "#000000" : "#37CAFA"}
buttonBackgroundColor={item.status === 0 ? null : "#37CAFA"}
buttonTextColor={item.status === 0 ? "#000000" : "#FFFFFF"}
buttonText={item.status === 0 ? USER_STATUS.REQUESTED : USER_STATUS.FOLLOWING}
Sure you can use the ternary operator still, you just have to use it twice , for example: 当然你仍然可以使用三元运算符,你只需要使用它两次 ,例如:
buttonBorderColor={
item.status === 0
? "#000000"
: item.status === 1
? "#37CAFA"
: "#FFFFFF" // if status is 2
}
That said, it's a bit uncomfortable to read - you might consider using an array indexed by status
whose value is the color you want instead: 也就是说,阅读有点不舒服 - 您可以考虑使用
status
索引的数组,其值是您想要的颜色:
const colors = ["#000000", "#37CAFA", "#FFFFFF"]
// ...
buttonBorderColor={ colors[item.status] }
Use switch
to handle three statuses. 使用
switch
处理三种状态。 Nesting ternary
operators is not a wise practice. 嵌套
ternary
运算符不是明智的做法。
var buttonBorderColor,
buttonBackgroundColor,
buttonTextColor,
buttonText
switch (item.code) {
case 0:
buttonBorderColor = '#000000'
buttonBackgroundColor = null
buttonTextColor = "#000000"
buttonText = USER_STATUS.REQUESTED
break;
case 1:
buttonBorderColor = '#37CAFA'
buttonBackgroundColor = '#37CAFA'
buttonTextColor = "#FFFFFF"
buttonText = USER_STATUS.FOLLOWING
break;
case 2:
buttonBorderColor = '#FFFFFF'
buttonBackgroundColor = '#FFFFFF'
buttonTextColor = "#FFFFFF"
buttonText = USER_STATUS.ELSE
break;
default:
break;
}
You can use this way 你可以用这种方式
buttonBorderColor={item.status === 0 ? "#000000" : (item.status === 1 ? "#000001" : "#37CAFA")}
or you can use if else ladder 或者你可以使用if else阶梯
if (item.status === 0) {
buttonBorderColor = '#000000'
buttonBackgroundColor = null
buttonTextColor = "#000000"
buttonText = USER_STATUS.REQUESTED
} else if (item.status === 1) {
// do something
} else {
// do something
}
You can do it like this: 你可以这样做:
const pickValue = (status, v1, v2, v3) =>
status === 0
? v1
: status === 1
? v2
: v3;
return (
<PersonHandler
profilePicture={item.user.profileImage ? { uri: item.user.profileImage } : DefaultUser}
firstName={item.user.firstName}
lastName={item.user.lastName}
buttonBorderColor={pickValue(item.status, "#000000", "#37CAFA", null)}
buttonBackgroundColor={pickValue(item.status, null, "#37CAFA", null)}
buttonTextColor={pickValue(item.status, "#000000", "#FFFFFF", null)}
buttonText={pickValue(item.status, USER_STATUS.REQUESTED, USER_STATUS.FOLLOWING, null)}
submitting={unfollowIsInProgress && item._id === unfollowingPerson._id}
onButtonPress={() => this.onUnfollowPress(item)}
/>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.