ant-design / ant-design/pro-components

proForm中defaultColsNumber数量统计问题

Open
#8,523 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

最近因为需求使用了proform组件,使用了QueryFilter中的Collapsed功能,发现一个默认展示defaultColsNumber统计数量的问题。
示例代码:

{shouldDisplay ? : null}
...
这里问题是在react中条件渲染常用的三元表达式返回null时会被统计进去,导致defaultColsNumber属性不准确,还会导致某些情况下最后一个元素直接丢失,这个是违背React开发者编程习惯的设计。。。
不过解决方案也有,提供给遇见同样问题的开发者:
尝试方案1【失败】: 尝试用自己封装组件FilterItem将所有的formitem包裹然后React.Chilren.toArray(xxx).filter(Boolean),最终失败,因为ProForm不支持嵌套的标签会导致渲染异常成一列。。。,这里如果可以对ProFormItem的instance类型判断做一层过滤体验会更好。
尝试方案2【失败】:尝试对defaultColsNumber做动态返回,写一个usememo然后做if判断返回不同的number,结果也不太行,发现会导致最后一个formitem元素不渲染。。。
尝试方案3【成功】:将三元表达式改成了hidden属性,成功了,这里我理解是因为hidden其实是渲染的只是改变了display,虚拟dom列表还是存在,所以defaultColsNumber数量和proform内部逻辑对的上,最终解决了这个头疼的问题,但是这个方案在procomponent官方文档搜不到,其实可以介绍下正确姿势避免开发者踩坑,这里花了笔者一个上午的时间。。。。。。。。

最终结论:希望官方能解决或者优化一下这个方式,给出更好的解决方案,又或者文档中说明一下。。。

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the QueryFilter example with defaultCollapsed, defaultColsNumber={5}, and a conditionally rendered ProFormText that returns null. Read the QueryFilter and ProForm behavior involved in counting fields, then verify that conditional null children do not consume a slot or hide the final visible item. Confirm the behavior with a regression test if the relevant test entry point is found.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.