react antd 就是包了巧克力的屎

62 条回复 • 2025-08-19 16:42:31 +08:00

1

yuhuij

OP

49 天前

附上自己的解决方案，目前能做到自适应，但是表格下面部分的元素会产生闪烁，比如分页。（顺便求下，有没有 react/antd 交流群，谢谢各位大佬）
```
import { debounce } from "lodash-es";
import { useCallback, useLayoutEffect, useRef, useState } from "react";

export function useTableScroll() {
const [tableHeight, setTableHeight] = useState(600);
const tableContainerRef = useRef<HTMLDivElement>(null);

const calculateTableHeight = useCallback(() => {
const node = tableContainerRef.current?.querySelector(".ant-table-tbody") as HTMLElement;
const nodeRect = node?.getBoundingClientRect() ?? { top: 0 };
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const pagination = tableContainerRef.current?.querySelector(".ant-pagination") as HTMLElement;
const { top: nodeTop } = nodeRect;
const { height: paginationHeight } = pagination?.getBoundingClientRect() ?? {
height: 0,
};
const { marginTop: paginationMarginTop } = pagination
? (getComputedStyle(pagination) as CSSStyleDeclaration)
: { marginTop: "0px" };

const height = viewportHeight - nodeTop - paginationHeight - Number(paginationMarginTop.replace("px", "")) - 40;
// console.log("[ height ] >", height);
setTableHeight(height);
}, []);

useLayoutEffect(() => {
if (!tableContainerRef.current) return;

const debouncedCalculate = debounce(calculateTableHeight, 100);

// 初次加载时计算一次
debouncedCalculate();

const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target === tableContainerRef.current) {
debouncedCalculate();
}
}
});

resizeObserver.observe(tableContainerRef.current);

// 清理函数：组件卸载时停止观察
return () => {
resizeObserver.disconnect();
debouncedCalculate.cancel();
};
}, [calculateTableHeight]);

return { scroll: { y: tableHeight }, tableContainerRef };
}

```

2

rsyjjsn

49 天前

7

那 vue 的 element 岂不是包了屎的一坨翔？

3

AokiNet

49 天前

这个问题每次我都直接通过改样式解决了，你这个逻辑有点多余

4

laommmm

49 天前

没事，等你需要升级 ANTD 相关库的时候，就发现踩在屎上继续堆屎了。

5

yuhuij

OP

49 天前

@AokiNet 怎么改的朋友，issues 里面的 CSS 方案我试过了没用

6

AokiNet

49 天前

@yuhuij 就说表格滚动这个问题，scroll.y 有和没有他的 dom 结构是不一致的，我一般就直接 scroll.y = 'auto', 然后 table 包个类名，dom 一层层 flex 改下去实现，还有楼上那位哥们说的太对了，要升级才是头疼

7

ZDaYu

49 天前

react 没用过 vue 的 antdv 文档写的也不清晰好多业务上的需求还改不了，，，蛮头疼的，下个版本准备换成 naiveui 试试

8

Immortal

49 天前

Vue 有什么好用的组件库吗

9

skallz

49 天前

貌似这个和 react 渲染机制导致的，react 运行时性能感觉不是特别好优化（或者说不够时间优化？），比如你说的这些功能，实际上以前也有做过，但是后面的版本被删掉了。。。想要高性能的表格，可以考虑换 ant s2 ，它就做了你上面说的这些功能

10

unhappy224

49 天前

传统的话 vue 就用 element-ui （ plus ）就行，其他的 antdv 和 naive-ui 都有点问题。naiveui 功能多点，还好，不过他整体样式是用 style 实现的（可能不准确，就是和正常的 css 那套有点不一样，看源码很明显），有点创新，不过在 tailwind css 流行的背景下，其实没必要了，搞得还很复杂。antdv 问题很大，别用了。另外 element-ui 有个优势就是源代码很简单，用的 vue sfc 的方式，很容易看懂、修改，不像另外 2 个 tsx 和手写 render 函数加上什么 vc-component ，style 管理，看得头大。新的什么 daisyui ，nuxtui 那些没用过，不评价

11

skallz

49 天前

而且 vue 的表格组件要做到以上的功能，基本也不是 ui 库提供的，都是一个单独的表格组件库做的，ui 库的表格组件也没遇到过功能很全性能比较优秀的。。。

12

ories

49 天前

归根结底是 vue 和 react 设计使用理念不一样而不是 antd 或者 element 的问题

13

yuhuij

OP

49 天前

@unhappy224 确实，为了这个问题我去看了 antdv table 的源码，确实头大。另外发现他们的表格是依赖了一个 rc-table 作为基础。

14

shihao9618

49 天前

用 aggrid 吧

15

liuliancc

49 天前

@unhappy224 #10 “antdv 问题很大”大佬可以展开说一下吗，我刚开一个项目用的 antdv ，目前遇到的一个坑是重写组件样式要去掉 style 的 scope 属性（可能是个别组件），不然无法生效，所以我直接写到了全局样式里了，别的还不清楚有什么坑

16

microscopec

49 天前

antd5 还好，至少遇到问题还有解决方案，antd2 是真难用，而且项目一旦大了，就很难升级到 5 了..

17

gogogo2000

49 天前

@yuhuij #13 你会发现 antd 整个基本就是 rc 的壳，几乎所有控件最终都会调用 rc-*控件

18

unhappy224

49 天前

@liuliancc 首先是不怎么维护了，然后源代码结构非常复杂，还有 vc-component （例如 a-table 就依赖于 vc-table 这个组件），你改个很简单的样式说不定都要绕很久。个人认为组件不太好用，bug 比 element-ui 多。

19

beginor

49 天前

在用 ng-zorro-antd 的时候也有这种感觉，甚至跟多控件的 API 都不统一，但是没办法

20

angrylid

49 天前

用三方组件库本来就是出于工程的妥协了。
这些所谓基础功能，蚂蚁金服那么多中后台系统都鲜少甚至从未用过。

21

skallz

48 天前

@angrylid 阿里的很多开放出来的系统后台就已经很烂了，某些后台，表格文字过长出现省略号，然后鼠标悬浮上去时浮层文字超出屏幕了，看不到完整的文本，向系统负责人反馈，被告知这个没办法文字过长了，想查看文本得导出数据查看，我当时就问做一个换行的文本浮层是什么很难的事情吗？还有就是像 op 提到的表格没法拖动宽度，这个也同样体现在他们的那些后台系统问题中，有些文本比较长，导致表格列宽度过大，想要拖动表格宽度也拖不了导致一个屏幕就只能看两三列数据，在线查看体验极差，必须得导出数据才能看。。。

22

NerbraskaGuy

48 天前

字节也有 react 的组件库 semi ，只是没 antd 火，不知道和 antd 比起来怎么样。

23

yuhuij

OP

48 天前

@gogogo2000 诶，冲着他家的 pro components 去的，深入了解后可能真不如 vue element 的解决方案

24

yuhuij

OP

48 天前

@angrylid 是啊，想着能快速启动项目，结果好多坑。

25

yuhuij

OP

48 天前

朋友们，有没有 react 交流群。因为我还有好多 react 找不到好的解决方案，比如路由跳转滚动条恢复，数据状态缓存，类似 vue 的 keep-alive 。虽然从 vue 到 react 思维要转变，但是真的好多在 vue 里面好用的功能，在 react 生态里找不到好的解决方案。

26

unhappy224

48 天前

@yuhuij 如果能接受 vue 可以看看 vben ，也包括很多了，就是封装的东西有点多

27

angrylid

48 天前

@skallz
换行不难，但如果考虑到多语言混排的情况也不会很简单。
当然我觉得他们拒绝你只是觉得没必要，因为你在旁边加个按钮，弹出一个对话框显示所有内容或者拷贝到剪贴板也不是很难的事。

28

yuhuij

OP

48 天前

@unhappy224 本来是想用 vben 的，可是我想着用久了 vue ，换换 react ，开弓没有回头箭，这个项目是必须要继续吃下去了。🥹

29

qzhai

48 天前

1

用 react 要抛弃掉 vue 那种开发思路，vue 是配置文件型的开发思路，什么功能都给你整好了，你照着文档配置就行，react 这面，你就当是在写 js ，遇到问题就 js 写就行，但是 antd ，怎么说，是想把思路往 vue 上套，但是做不到每个人都满意。

30

skallz

48 天前

@angrylid 反正阿里的很多后台系统，给我的感觉就是非常难用，按理说这些应该是非常非常基础的业务组件交互沉淀，不应该做成这样的才对，给人的感觉就是我功能做出来了，售前能有东西使劲吹就完事，至于好不好用能不能用那就是另一回事了，这种基础组件不应该是各个项目组通用的吗，为何能做到这么差。。。

31

gogogo2000

48 天前

@yuhuij #25 keep-alive 有个实验性的 activity： https://react.dev/reference/react/Activity

路由守卫什么的需要自己写

32

zombiej

48 天前

@gogogo2000 antd 和 rc 都是同一批人写的，rc 抽出来是因为还会用到其他地方，比如 antd-mobile 。

33

UnluckyNinja

48 天前 via Android

2

@Immortal #8 https://ui-libs.vercel.app/

34

zepc007

48 天前

React UI Library 现在一直用 mantine UI 还有抖音的那个 semi design ，感觉挺不错的

35

zdx1

48 天前

react 好用的表格组件，该用啥
现在我们也是，表格形式的超大表单，性能问题，antd ，tdesign 都使用过，效果都不太理想，现在是 antd 凑合用，这种超大型表单，想支持拖拽列排序，性能极差。卡住了。

36

bojackhorseman

48 天前

@zdx1 https://tanstack.com/table/latest 这个呢

37

yuhuij

OP

48 天前

@gogogo2000 实验性的不敢用在生产上...在 github 上找了个库，凑活着用吧

38

gogogo2000

48 天前

@zombiej 是的，实际上 rc 基本上也是蚂蚁的人写的，但是这种套娃的写法使得找实现和做优化修改难度剧增，很多功能都是套了好几层才暴露出来的，需要花很大力气才能搞清楚最终实现

39

canvascat

48 天前

import { useSize } from 'ahooks';

const containerRef = useRef<HTMLDivElement>(null);
const size = useSize(containerRef);
const height = (size?.height || 500) - 120;
return (
<div ref={containerRef} style={{ resize: 'vertical', border: '1px solid #000', height: 500, overflow: 'hidden' }}>
<Table<DataType>
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content', y: height }}
/>
</div>
);