推荐最新

React 我想要一个弹窗没有遮罩弹出来也可以点击页面的，antd不太行有没有推荐的UI库?

还有表格 antd连虚拟滚动都没有完善，我还想要可编辑行、可拖动排序的功能，都不好用，还得自己封装。 vue的话我用过一个vxe-table，比element UI 好用得多，react求推荐！

浏览量327

请问为何antd/dropdown的menu属性传递调用函数生成items会报错呢？

我有如下的代码使用antd/Dropdown组件： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241223/b73225c915891770fcdb2f2b71a45476.png) const items: MenuProps["items"] = [ { label: { console.log('收藏: ') }}>收藏, key: '0', }, { label: 2nd menu item, key: '1', }, { type: 'divider', }, { label: '3rd menu item', key: '3', }, ]; ... { updateIsOpenObj(nodeData.key, false) }} > { e.preventDefault() }}> 这样使用是没有问题的：调用打开dropdown： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241223/903a82035683cb38059a343aff620f78.png) 但是我修改为此代码（使用"genDropdownItems()"生成items，而不直接传递items，就会报错）： // 生成dropdown的key const genDropdownItems = (key: string | number): MenuProps["items"] => { const items: MenuProps["items"] = [ { label: { console.log('收藏: ', key) }}>收藏, key: '0', }, { label: 2nd menu item, key: '1', }, { type: 'divider', }, { label: '3rd menu item', key: '3', }, ]; return items } { updateIsOpenObj(nodeData.key, false) }} > { e.preventDefault() }}> 报错结果： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241223/7f99b72d236a0909df54f8d94e4fd188.png) Unhandled Runtime Error Error: React.Children.only expected to receive a single React element child. Call Stack Object.onlyChild [as only] ... at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/router/adapters.js:79:11) at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:5389) at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:7785) at Container (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:78:1) at AppContainer (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:182:11) at Root (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:396:11) React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

浏览量315

半寸时光爱思考

如何在Ant Design的Table组件中让合并行背景色覆盖整个合并区域？

目前效果如图，想要的效果合并两行，背景也想覆盖两行，图中红框部分都会有背景。求问这个如何实现 https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20250121/52288dc666498d39e9caa1199a95b594.png 想过利用rwospan去把对应数量行都添加背景，但是如果鼠标从rowspan为0的行，也就是图中白色部分，移入是获取不到合并行的。 antd的版本是"4.16.13"，链接中是antd的默认效果， "https://codesandbox.io/p/sandbox/biao-ge-xing-lie-he-bing-ant..." (https://link.segmentfault.com/?enc=HggAR3f4Q7NgEPoQrL%2FEFw%3D%3D.pQz%2BphIfFGHSzIH6rr0HKCVxrhOiXRRFAiUpZ7qY6vNChWpOz3fzQUScz%2BYGtTQzKDzFRz3gMItZxQvbivFG2ppmlu3Kygji55ZrP%2FS2P%2BxDW94jsGtkwo%2FSvFkcPpeC)

浏览量323

CO_co

请问要如何才能对一个antd组件的多个class做样式修改呢，使用多className覆盖不能做到？

现在有一个需求，就是对antd的Collapse做一个样式的修改，去掉border-radius： // TestComp/index.tsx import type { CollapseProps } from 'antd'; import { Collapse, Button } from 'antd'; import styles from './index.module.css' const text = ` A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. `; const items: CollapseProps['items'] = [ { key: '1', label: This is panel header 1, children: {text}, }, { key: '2', label: 'This is panel header 2', children: {text}, }, { key: '3', label: 'This is panel header 3', children: {text}, }, ]; const TestComp: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return ; }; export default TestComp; css代码如下： // TestComp/index.module.tsx .myCollapse:global(.ant-collapse) { border-radius: 0px !important; } /* .myCollapse2:global(.ant-collapse-item:last-child) { border-radius: 0px !important; } */ 效果：我们可以看到顶部左右是已经去除，但是下面的最后一个item没有去除： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/4ccfe00c4fe605291081e895758a9e6c.png) 所以我进一步想要对".ant-collapse-item:last-child" 做修改： // TestComp/index.module.tsx .myCollapse:global(.ant-collapse) { border-radius: 0px !important; } .myCollapse2:global(.ant-collapse-item:last-child) { border-radius: 0px !important; } // tsx ; 但是不生效： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/83bc816506f5a01459727be06c4bf7d5.png) === 请问要如何才能对一个antd组件的多个class做样式修改呢？ === 编辑-01 代码如下： "https://codesandbox.io/s/ynk3tr" (https://link.segmentfault.com/?enc=9MBtT68dacU8t3KV8CXDYA%3D%3D.3K7pENa0JsmYnVgSfyxDPGH%2BKt79DM36TItlN0SCxWc%3D)

浏览量390

云卿山手

请问如何进行使用添加Button在antd/Collapse 的label上，点击Button，不触发折叠的事件？

基于antd 的折叠块我使用此代码做到：折叠块的使用（添加了一个按钮） import type { CollapseProps } from 'antd'; import { Collapse, Button } from 'antd'; const text = ` A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. `; const items: CollapseProps['items'] = [ { key: '1', label: This is panel header 1 { if(e.preventDefault) { e.preventDefault() } console.log(e) console.log('123') }} >您好, children: {text}, }, { key: '2', label: 'This is panel header 2', children: {text}, }, { key: '3', label: 'This is panel header 3', children: {text}, }, ]; const TestComp: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return ; }; export default TestComp; "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/bf367821844718cc1e6594ccbf733f91.png) 基于此折叠款，我加了一个按钮，但是现在有一个需求就是点击折叠块上面的header可以折叠，但是我不想点击button它也折叠。我尝试了用： if(e.preventDefault) { e.preventDefault() } 但是并不生效。

浏览量437

爬虫爬呀爬

React Antd 表单校验报错validateFields重复报错？

一个很普通的表单，动态校验了两个表单项，提交时newForm.validateFields()。结果出现重复的报错提示，控制台也报错key重复。控制台报错信息：Warning: Encountered two children with the same key, "请输入用户邮箱". Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/8c5600fdbe3025964c247f421bc7ab76.png) 代码： const handleOk = () => { newForm .validateFields() .then(async (values) => { //省略 ({ validator(_, value) { if(value && phone.test(value)) { return Promise.resolve(); } if(!value){ return Promise.reject(new Error("请输入用户手机号")); } return Promise.reject(new Error("请输入正确格式的手机号")); }, }), ]}> //剩余代码省略

浏览量298

强哥喝假酒

使用antd Form，期望只校验数据正确性不校验必填怎么操作？

表单有两个提交按钮，一个是保存，一个是提交。保存时，只验证数据正确性，下次继续完善。提交就是验证数据正确性同时验证必填项。该怎么实现呢？

浏览量314

饼干爱折腾

ProFormUploadButton Upload.LIST_IGNORE 不生效？

浏览量341

感觉对了

使用:global在组件内去修改antd的全局样式，为何并没有生效？

我想要参考"此文档" (https://link.segmentfault.com/?enc=eX%2B1Wx7thAclwi5HvwfKQg%3D%3D.OJKtNENIlnQp7DFCxRPQml12gvkWkhGCPy2AJW12qwenaBb1DpM31uJ82dWjqOKZel1587dcDEUr2ETHmLnuRQ%3D%3D)使用 ":gloabal" 去修改antd的Button的样式： // CustomAntdButton/index.module.css .myButton :global(.ant-btn-primary) { background-color: red !important } // CustomAntdButton/index.tsx import './index.module.css' ... CustomButton 按钮但是并没有任何改变： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/31f46e375f2bdec08bfde6ff3431c6a3.png) 完整代码如下： "https://codesandbox.io/s/fk7jnl" (https://link.segmentfault.com/?enc=qfxvb41Xus0dYsOFCFklJw%3D%3D.O1bK79mj7IgYPznyUiBMeuXfBg%2FqqUi78IgzBOqXAhc%3D) 请问要如何才能在组件内自定义Antd组件的样式呢？

浏览量328

明道

请问如何进行antd的组件的内部的修改进而二次开发它，修改antd/tree内部的代码给item添加点击事件？

在参考"antd/tree" (https://link.segmentfault.com/?enc=25l%2B1rbQlC2w6VjXp5RUtQ%3D%3D.XRlTHMQfMHyPuLjbyBI9ADSrasI6Si%2Fky0nUWLCZVzuwHdh6lBXDDJnQJW60DB2EHmhhjGLhfwFSzktGGHUweQ%3D%3D)的时候，我想要关闭"checkable"和"selectable"，然后想要有点击的功能。但是我看文档是没有这个功能的。 1、所以很想基于antd/tree进行二次封装做到可点击。请问有什么可以指导一下可以做到此需求呢？ 2、因为我看组件是这样，不知怎么修改内部内容如何才能做到修改antd/tree内部的代码给每个item添加点击事件呢。传输的数据都是如下： const treeData: DataNode[] = [ { title: 'test-01', key: '0-0', children: [ { title: 'test001', key: '0-0-0', isLeaf: true, selectable: false }, { title: 'test002', key: '0-0-1', isLeaf: true, selectable: false }, { title: 'test003', key: '0-0-2', isLeaf: true, selectable: false }, ], selectable: false, icon: false, }, { title: 'test-02', key: '0-1', children: [ { title: 'test004', key: '0-1-0', isLeaf: true, selectable: false }, { title: 'test005', key: '0-1-1', isLeaf: true, selectable: false }, ], selectable: false, icon: false }, ]; 不知道如何进行二次开发请各位老师指导一下呢。

浏览量293

React 我想要一个弹窗 没有遮罩 弹出来也可以点击页面的，antd不太行 有没有推荐的UI库?