如何从0到1搭建基于antd的monorepo库——JsonSchemaForm组件优化（四）

文章系列

上一章：如何从0到1搭建基于antd的monorepo库——实现JsonSchemaForm组件（三）

下一章：如何从0到1搭建基于antd的monorepo库——使用dumi进行文档展示（五）

作者有话说

目前已经实现了一部分功能，源代码在 github，欢迎大家 Star 和 PR，一些待实现的功能都在 issue 中，感兴趣的同学可以一起加入进来。

看完这个系列可以收获什么：

1. 如何使用 pnpm workspace + lerna 搭建 monorepo 仓库
2. antd 的单个组件怎么进行文件结构的设计
3. 基于 antd form 实现一个 Json 渲染表单
4. antd 的打包方式以及如何使用 rollup 实现
5. 如何发布 monorepo 包到 npm

前瞻

组件库技术选型：

1. pnpm 10
2. node 20
3. lerna 8
4. react 18
5. antd 5
6. dumi 2

正片开始

添加 custom 类型

修改 JsonSchemaForm/constants.ts。

import JsonSchemaCustom from './components/JsonSchemaCustom';

export const RENDER_MAP: Record<
  JsonSchemaFormItemTypeType,
  ComponentType<any>
> = {
  // custom
  custom: JsonSchemaCustom,
};

添加 ts 类型

export type JsonSchemaFormItemTypeType =
  // custom
  | 'custom'
  
interface CustomJsonSchemaFormItemProps {
  id?: string;
  value?: any;
  onChange?: (value: any) => void;
}

type customRenderType = (
  props: CustomJsonSchemaFormItemProps,
) => React.ReactNode;

export interface CustomJsonSchemaFormItem
  extends Omit<BaseJsonSchemaFormItem, 'onChange'>,
    CustomJsonSchemaFormItemProps {
  $type: 'custom';
  customRender: customRenderType;
}

export type JsonSchemaFormItemType =
  // custom
  | CustomJsonSchemaFormItem

实现 JsonSchemaCustom 组件

新增 components/JsonSchemaCustom/index.tsx 文件。

import { createElement } from 'react';
import { CustomJsonSchemaFormItem } from '../../type';

const JsonSchemaCustom = ({
  customRender,
  ...props
}: Omit<CustomJsonSchemaFormItem, '$type' | 'formItemProps'>) => {
  return createElement(customRender, props);
};

export default JsonSchemaCustom;

总结

至此，一个基于 antd form 的 Json 渲染表单已经初步实现，但实际情况还需要实现更复杂的需求，比如：状态联动、精确渲染等，这些都在我的项目有实现，文章中就不展开说明了。

组件已经实现，但是怎么进行可视化展示以及测试代码是否有问题呢，接下来，我们会通过 dumi 实现组件库的可视化展示。

如果想提前知道更多内容可以直接查看github，欢迎大家 Star 和 PR，如有疑问可以评论或私信。