ant-design / ant-design/pro-components

🧐[问题] 自定义的ProFormItem不支持grid属性?

Open
#6,680 8 comments 1 reaction 0 assignees View on GitHub
AI Reply form
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🧐 问题描述

我自定义了一个ProFormItem组件,但是不能适配grid属性.

如下图, 红圈中的部分明显没有左右平分宽度.
image
对应的dom也没被 col类包裹.
image
仿写的ProFormUploadButton 组件, 官方的就可以左右平分. 我的就不行. 麻烦指点下怎么定义一个ProFormItem组件??!!
仿写代码仓库: [https://github.com/ant-design/pro-components/blob/master/packages/form/src/components/UploadButton/index.tsx](https://github.com/ant-design/pro-components/blob/master/packages/form/src/components/UploadButton/index.tsx)

### 💻 示例代码

```
// 自定义一个组件,仿照 ProFormUploadButton 组件的写法
import { createField } from "@ant-design/pro-form/lib/BaseForm";
const ImageUpload = () => {
return "你好世界";
};
const ProFormImage = createField(ImageUpload, {});
export default ProFormImage;

```

Contributor guide

Open the contributing guide

Research direction

Start with packages/form/src/components/UploadButton/index.tsx and the createField entry point from @ant-design/pro-form/lib/BaseForm. Compare the custom ImageUpload example with ProFormUploadButton and inspect the generated DOM for the missing col wrapper. Done means the custom ProFormItem responds to grid like the reference component.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.