复杂条件下的按钮是否展示，如何处理比较优雅？

Question

// 根据当前登录角色
const isUser = true;
// 根据当前登录角色
const isAdmin = true;
// 当前业务对象的状态
const state = 'idle';
// 下面的各种逻辑判断按钮是否出现，有的还要判断是否disabled
return <div className='btnGroup'>
{isUser && state === 'aaa' && <button disabled={..}>开启</button>}
{isAdmin && state === 'bbb' && <button>关闭</button>}
{(isAdmin || isUser) && state === 'ccc' && <button>下架</button>}
{isUser && state === 'ddd' && <button>上架</button>}
{isUser && state === 'eee' && <button>发布</button>}
</div>

上面这种业务场景，怎么写比较优雅，一堆的条件判断，担心写出bug。

Answer 1

1. 可以抽个函数出来，思路是：先角色后状态

   function getBtn (isUser,isAdmin,status) {
     if (isUser) {
        if (['aaa','bbbb'].includes(status)) {
              return ...
        }
     }
     if (isAdmin) {
        if (['ddd','eee'].includes(status)) {
              return ...
        }
     }
     return ...(默认)
   }

2. 策略模式，把对应关系都罗列出来，根据条件映射(偷个懒，就不写了)
   参考这个问题即可：https://segmentfault.com/q/1010000043521515

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

可以考虑把按钮的状态具名化维护在一个对象中，但是这样你需要根据你的其他状态isUser, state等等去手动触发按钮的状态改变