ant-design / ant-design/pro-components
🧐[问题] 自定义的ProFormItem不支持grid属性?
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🧐 问题描述
我自定义了一个ProFormItem组件,但是不能适配grid属性.
如下图, 红圈中的部分明显没有左右平分宽度.
对应的dom也没被 col类包裹.
仿写的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
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