javascript - 超过 2个值的javascript三元运算符替代方案

  显示原文与译文双语对照的内容
94 4

在我的本地应用程序中,我编写了这样的。

 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)}
/>
 ); 

现在我有超过 2个状态要处理,所以这里的三元运算符不能使用。什么是最好的处理这种情况的方法?

我现在有 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个回答

76 3

当然可以使用三元运算符,但是你只需使用两次 ,例如:

 buttonBorderColor={
 item.status === 0
?"#000000"
 : item.status === 1
?"#37CAFA"
 :"#FFFFFF"//if status is 2
}

也就是说,阅读有点不容易。你可以能考虑使用 array 索引的,它的值是你想要的颜色:

const colors = ["#000000","#37CAFA","#FFFFFF"]
//...
buttonBorderColor={ colors[item.status] }
原作者:
146 0

使用 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;
}
原作者:
113 3

你可以用这种方式

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
}
原作者:
124 4

你可以这样做:

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)}
/>
);
原作者:
...