ant-design / ant-design/pro-components

🧐[问题]在readonly模式下,为什么丢弃了ProFormList的containerClassName呢?

Open
#8,979 1 comment 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

### 🧐 在readonly模式下,ProFormList的containerClassName丢失了

我在ProFormList组件上写了属性`containerClassName="flex flex-col gap-y-4"`,用于将每个list项之间隔开4个单位的距离,在表单可编辑的模式下,是正常隔开的。在表单readonly模式下,项之间的距离丢失了,检查发现是containerClassName丢了。

提供readonly前后的两张结构截图:

![Image](https://github.com/user-attachments/assets/45de18c8-137a-4502-a86c-621290426e66)

![Image](https://github.com/user-attachments/assets/0784e6d6-8f77-4494-a312-3eb6cd494297)

看了下代码:https://github1s.com/ant-design/pro-components/blob/master/packages/form/src/components/List/ListContainer.tsx#L170

![Image](https://github.com/user-attachments/assets/5d87bd54-9226-4f09-b907-2c8e65c7471f)

请问:

1. 在readonly模式下,丢弃containerClassName的设计目的是什么?我想学习下。
2. 我想在readonly模式下,也将项目之间隔开4个距离,有什么其他办法吗?

Contributor guide

Open the contributing guide

Research direction

Read packages/form/src/components/List/ListContainer.tsx around line 170, then compare how ProFormList renders its container in editable and readonly modes. Confirm the intended behavior from the existing structure; done means the readonly case either preserves containerClassName consistently or clearly documents the supported alternative.

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.