antd 官方的 demo 怎么那么少 jsx

V2EX = way to explore

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

现在注册

已注册用户请登录

React

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

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

另外，我想吐槽下，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 这些，这个特性其实还是有点违反我的直觉的。