三元运算符替代超过2个值

Question

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

现在我有两种以上的状态要处理,因此这里的三元运算符不能使用.处理这种情况的最佳方法是什么？

我现在有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}

Answer 1

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

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

也就是说,读取它有点不舒服 - 您可以考虑使用索引的数组,status其值是您想要的颜色:

const colors = ["#000000", "#37CAFA", "#FFFFFF"]
// ...
buttonBorderColor={ colors[item.status] }