antd 官方的 demo 怎么那么少 jsx

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 462 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

另外，我想吐槽下，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>

12 条回复 • 2023-08-21 17:27:51 +08:00

israinbow

2023-08-19 13:43:04 +08:00

JSX 是 "syntax extension to JavaScript", 样例当然要用最小化实现也就是 JavaScript 的语法来写.

clue

2023-08-19 17:51:56 +08:00

你说的 jsx 是指用 jsx 的语法声明 columns 吗？第一次知道 antd 支持这样的写法

但我觉得不应该这样做，因为这里的 jsx columns 传给 Table 组件，最终也会被解析为配置。因为 Table 实际的内容是 thead>tr>th, tbody>tr>td 这些，这个特性其实还是有点违反我的直觉的。