在我的本机应用程序中,我编写了这样的代码。
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)}
/>
);
现在我有两个以上的状态要处理,因此此处的三元运算符无法使用。处理这种情况的最佳方法是什么?
我现在有3个状态。 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}
答案 0 :(得分:13)
确定您仍然可以使用三元运算符,只需使用两次 ,例如:
buttonBorderColor={
item.status === 0
? "#000000"
: item.status === 1
? "#37CAFA"
: "#FFFFFF" // if status is 2
}
也就是说,阅读起来有点不舒服-您可以考虑使用由status
索引的数组,其值就是您想要的颜色:
const colors = ["#000000", "#37CAFA", "#FFFFFF"]
// ...
buttonBorderColor={ colors[item.status] }
答案 1 :(得分:2)
使用switch
处理三种状态。嵌套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;
}
答案 2 :(得分:1)
您可以使用这种方式
buttonBorderColor={item.status === 0 ? "#000000" : (item.status === 1 ? "#000001" : "#37CAFA")}
或者您可以使用梯形图
if (item.status === 0) {
buttonBorderColor = '#000000'
buttonBackgroundColor = null
buttonTextColor = "#000000"
buttonText = USER_STATUS.REQUESTED
} else if (item.status === 1) {
// do something
} else {
// do something
}
答案 3 :(得分:1)
您可以这样做:
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)}
/>
);