antd 官方的 demo 怎么那么少 jsx

好像就喜欢配置写法。。，为什么呢？

另外，我想吐槽下，Dropdown 组件在 table 中太难用了，试了好多次才拿到每行的数据...

官方 demo:

const handleMenuClick = (e) => {
  message.info('Click on menu item.');
  console.log('click', e);
};
const items = [
  {
    label: '1st menu item',
    key: '1',
    icon: <UserOutlined />,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: <UserOutlined />,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: <UserOutlined />,
    danger: true,
  },
  {
    label: '4rd menu item',
    key: '4',
    icon: <UserOutlined />,
    danger: true,
    disabled: true,
  },
];
const menuProps = {
  items,
  onClick: handleMenuClick,
};

<Dropdown menu={menuProps}>
      <Button>
        <Space>
          Button
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>

我的 demo:

const handleMenuClick = (e, record) => {
    console.log('e', e)
    console.log('record', record)
    if (e.key === 'updateRole') {
      handleShowUpdateRoleDialog(record.adminId)
    }
    if (e.key === 'edit') {
      handleShowEditDialog(record.adminId)
    }
    if (e.key === 'resetPassword') {
      handleShowResetPasswordDialog(record.adminId)
    }
    if (e.key === 'delete') {
      handleShowDeleteDialog(record.adminId)
    }
  }

  const items = [
    {
      label: '分配角色',
      key: 'updateRole',
    },
    {
      label: '编辑',
      key: 'edit',
    },
    {
      label: '重置密码',
      key: 'resetPassword',
      danger: true,
    },
    {
      label: '删除',
      key: 'delete',
      danger: true,
    },
  ]

  // 点击下拉事件
  const getMenuProps = (record) => {
    return {
      items,
      onClick: (e) => handleMenuClick(e, record),
    }
  }

 <Table
          dataSource={userList}
          rowKey={(record) => record.adminId}
          pagination={false}
          loading={loading}
        >
          <Column title="编号" dataIndex="adminId"></Column>
          <Column title="账号" dataIndex="username"></Column>
          <Column title="昵称" dataIndex="nickName"></Column>
          <Column title="邮箱" dataIndex="email"></Column>
          <Column
            title="添加时间"
            dataIndex="createTime"
            render={(_, record) =>
              record.createTime
                ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            }
          />
          <Column
            title="最后登录"
            dataIndex="loginTime"
            render={(_, record) =>
              record.loginTime
                ? dayjs(record.loginTime).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            }
          />
          <Column
            title="是否启用"
            dataIndex="activeState"
            render={(_, record) => (
              <Switch
                checked={record.activeState == 1}
                onClick={(checked) => {
                  updateState(record.adminId, checked ? 1 : 0)
                }}
              />
            )}
          />
          <Column
            title="操作"
            render={(text, record) => (
              <Dropdown menu={getMenuProps(record)}>
                <Button>
                  <Space>
                    操作
                    <DownOutlined />
                  </Space>
                </Button>
              </Dropdown>
            )}
          />
        </Table>