ant-design / pro-components

🏆 Use Ant Design like a Pro!

Home Page:https://pro-components.antdigital.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

proForm中defaultColsNumber数量统计问题

hulk4fe opened this issue · comments

commented

最近因为需求使用了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官方文档搜不到,其实可以介绍下正确姿势避免开发者踩坑,这里花了笔者一个上午的时间。。。。。。。。

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