react-exam.md

给你一个如下的数据结构：

{
  "users": [
    {
      "id": "20c89779-aba7-4b8f-873c-b2f27e761d1f",
      "name": "colinhan",
      "displayName": "Colin Han",
      "company": "上海皮图麦信息科技有限公司",
      "department": "研发部",
      "roles": [
        "admin",
        "user",
        "secretUser",
      ],
      "createTime": "2017-10-01T18:30:00.000Z",
      "lastLoginTime": "2017-12-18T01:27:51.688Z"
    }, {
      "id": "77652be1-261f-4eb8-891a-c82e99e2faee",
      "name": "robertliu",
      "displayName": "Robert Liu",
      "company": "西安术剑侠网络科技有限公司",
      "department": "市场部",
      "roles": [
        "user"
      ],
      "createTime": "2017-10-02T19:30:00.000Z",
      "lastLoginTime": "2017-12-18T01:27:51.688Z"
    },
    {
      "id": "f23af397-6492-4253-a99d-7cf31dbb4892",
      "name": "victoriama",
      "displayName": "Victoria Ma",
      "company": "西安术剑侠网络科技有限公司",
      "department": "市场部",
      "roles": [
        "user"
      ],
      "createTime": "2017-10-02T19:30:00.000Z",
      "lastLoginTime": "2017-12-18T01:27:51.688Z"
    },
    {
      "id": "e2c019b6-cdb3-4292-9989-109d2ce5753e",
      "name": "douglaszhang",
      "displayName": "Douglas Zhang",
      "company": "上海皮图麦信息科技有限公司",
      "department": "市场部",
      "roles": [
        "secretUser",
        "user"
      ],
      "createTime": "2017-10-02T19:30:00.000Z",
      "lastLoginTime": "2017-12-18T01:27:51.688Z"
    }
  ]
}

使用React实现一个组件UserPanel，能够根据上面的数据结构生成如下的界面。

• 你需要实现上图中根据不同规则分组的功能。
• 其中的用户角色有三类：
  • 管理员：roles字段中包含'admin'的用户
  • 涉密用户：roles字段中包含'secretUser'的用户
  • 普通用户：roles字段中不包含以上两个值的用户

组件应该实现类似下面的接口。其中的data即为上面的描述的数据结构。

<UserPanel data={data} />