🧐升级到3版本后，ProConfigProvider如何扩展form的字段，升级后导致所有扩展form字段都失效了

[zouyi741599086]

🧐 问题描述

2版本是好的，升级到3版本我扩展的form字段就失效了，找不到文档

💻 示例代码

import { lazy } from 'react';
import {
ProConfigProvider,
} from '@ant-design/pro-components';
import { Button } from 'antd';
import Lazyload from '@/component/lazyLoad/index';

const UploadImg = lazy(() => import('@/component/form/uploadImg/index'));
const UploadImgAll = lazy(() => import('@/component/form/uploadImgAll/index'));
const UploadImgVideoAll = lazy(() => import('@/component/form/uploadImgVideoAll/index'));
const Teditor = lazy(() => import('@/component/form/teditor/index'));
const PreviewTeditor = lazy(() => import('@/component/preview/teditor/index'));
const UploadFile = lazy(() => import('@/component/form/uploadFile/index'));
const UploadFileAll = lazy(() => import('@/component/form/uploadFileAll/index'));
const TencentMap = lazy(() => import('@/component/form/tencentMap/index'));
const Province = lazy(() => import('@/component/form/province'));
const ProvinceCity = lazy(() => import('@/component/form/provinceCity'));
const ProvinceCityArea = lazy(() => import('@/component/form/provinceCityArea'));

/**

• pro form超级表单的配置，增加自定义字段

• @author zy 741599086@qq.com

• @link https://www.superadminx.com/
  */
  export default (props) => {

  return (<>
  <ProConfigProvider
  valueTypeMap={{
  // 上传图片
  uploadImg: {
  render: (text) => ,
  renderFormItem: (text, props) => (
  <UploadImg {...props?.fieldProps} />
  ),
  },
  // 上传多图
  uploadImgAll: {
  render: (text) => {
  return <>
  {text.map(item => {
  return
  })}
  </>
  },
  renderFormItem: (text, props) => {
  return <UploadImgAll {...props?.fieldProps} />
  },
  },
  // 上传多个图片或视频
  uploadImgVideoAll: {
  render: (text) => {
  return <>
  {text.map(item => {
  return <Button type="link" size="small" link={${item.url}}>{item.name}
  })}
  </>
  },
  renderFormItem: (text, props) => {
  return <UploadImgVideoAll {...props?.fieldProps} />
  },
  },
  // 上传文件
  uploadFile: {
  render: (text) => <Button type="link" size="small" link={${text.url}}>{text.name},
  renderFormItem: (text, props) => {
  return <UploadFile {...props?.fieldProps} />
  },
  },
  // 上传多个文件
  uploadFileAll: {
  render: (text) => {
  return <>
  {text.map(item => {
  return <Button type="link" size="small" link={${item.url}}>{item.name}
  })}
  </>
  },
  renderFormItem: (text, props) => {
  return <UploadFileAll {...props?.fieldProps} />
  },
  },
  // 编辑器
  teditor: {
  render: (text) => ,
  renderFormItem: (text, props) => (
  <Teditor {...props?.fieldProps} />
  ),
  },
  // 腾讯地图选择经纬度
  tencentMap: {
  render: (text) => text,
  renderFormItem: (text, props) => (
  <TencentMap {...props?.fieldProps} />
  ),
  },
  // 省选择
  province: {
  render: (text) => text,
  renderFormItem: (text, props) => (
  <Province {...props?.fieldProps} />
  ),
  },
  // 省市选择
  provinceCity: {
  render: (text) => text,
  renderFormItem: (text, props) => (
  <ProvinceCity {...props?.fieldProps} />
  ),
  },
  // 省市区选择
  provinceCityArea: {
  render: (text) => text,
  renderFormItem: (text, props) => (
  <ProvinceCityArea {...props?.fieldProps} />
  ),
  },
  }}
  >
  {props.children}
  
  </>
  );
  };

[dosubot]

v3 之后，ProConfigProvider 扩展自定义表单字段的方式有了 breaking change，主要体现在：

1. 必须显式注入 valueTypeMap：v3 的 context 默认值是空对象 {}，如果没有在应用根部用 ProConfigProvider 注入 valueTypeMap，所有自定义和内置字段都会失效，渲染会回退为普通 input。你需要手动合并内置和自定义类型，并注入到 ProConfigProvider 里。参考

2. renderFormItem 改为 formItemRender：v3 不再调用 valueTypeMap 里的 renderFormItem，而是用 formItemRender。你需要把所有 renderFormItem 改成 formItemRender。源码实现

3. 合并内置类型：建议这样写，保证内置类型（如 radio、select 等）和自定义类型都能用：

import { ProConfigProvider } from '@ant-design/pro-components';
import ValueTypeToComponentMap from '@ant-design/pro-components/es/field/ValueTypeToComponent';

<ProConfigProvider
  valueTypeMap={{
    ...ValueTypeToComponentMap,
    uploadImg: {
      render: (text) => <img height={100} src={text} width={100} />,
      formItemRender: (text, props) => <UploadImg {...props?.fieldProps} />,
    },
    // 其它自定义类型...
  }}
>
  {props.children}
</ProConfigProvider>

4. props 传递更灵活：v3 已经修复了自定义 valueTypeMap 不能完整透传 props 的问题，现在所有 props 都会传递到你的自定义组件。PR#9149

5. 常见问题排查：

   • 没有合并内置类型，导致 radio、select 等失效。
   • 依然用 renderFormItem，导致自定义字段不渲染。
   • ProConfigProvider 没有包裹在应用根部，导致 context 丢失。

迁移建议：

• 把所有 renderFormItem 改成 formItemRender。
• 用 ...ValueTypeToComponentMap 合并内置类型。
• 确保 ProConfigProvider 在应用根部，valueTypeMap 不为空。

如需更详细源码和讨论，可参考 issue#9206 和 源码实现。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}