在 React 中处理多个用户角色和 2 个状态以更改逻辑和 UI 的正确方法

Question

我的项目有 3 个用户角色（家长 - 孩子 - 老师），每个角色都有 2 个不同的雕像（预订 - 未预订），它们会改变 UI 和逻辑。

示例：- 主页中的主页标题将根据用户角色和状态而变化。

如何在没有大条件链的情况下解决这个问题？

错误答案❌

  switch (userRole) {
    case 'parent':
      switch (status) {
        case 'booked':
          return // BookedParentComponent
        case 'unbooked':
          return // UnBookedParentComponent
      }

    case 'child':
      switch (status) {
        case 'booked':
          return // BookedChildComponent
        case 'unbooked':
          return // UnBookedChildComponent
      }

    case 'teacher':
      switch (status) {
        case 'booked':
          return // BookedTeacherComponent
        case 'unbooked':
          return // UnBookedTeacherComponent
      }
  }

Answer 1

您可以使用地图/对象，

const components = {
  "parent-booked": BookedParentComponent,
  "parent-unbooked": UnBookedParentComponent,
  "child-booked": BookedChildComponent,
  "child-unbooked": UnBookedChildComponent,
  "teacher-booked": BookedTeacherComponent,
  "teacher-unbooked": UnBookedTeacherComponent,
};

return components[userRole + "-" + status];