# @flipbyte/formik-json 中文文档

规范地址：https://npmcn.com/package/%40flipbyte/formik-json/

版本：0\.6\.2
npm 元数据更新时间：2022-04-05T11:16:20.704Z
中文译文更新时间：2026-11-14T23:32:57.551Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flipbyte/formik-json
原文对照：https://npmcn.com/package/%40flipbyte/formik-json/?lang=original
项目主页：https://github.com/flipbyte/formik-json-schema#readme
源码仓库：https://github.com/flipbyte/formik-json-schema

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.8 MB，72 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：12 个
- peer 依赖：lodash ^4\.17\.13，react ^16\.8\.6，react-dom ^16\.8\.6，prop-types ^15\.6\.2，@fortawesome/fontawesome-free ^5\.6\.3
- 首次发布：2019-02-02T05:04:34.606Z
- 最新版本发布：2022-01-25T11:51:52.110Z
- 近 30 天下载量：2553（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 0 个）

## 中文简介

formik-json是Formik方便地使用 JSON / Javascript 对象创建用于定义元素的表单的包装器

## 安装

```sh
npm install @flipbyte/formik-json
```

也可以使用：`pnpm add @flipbyte/formik-json`、`yarn add @flipbyte/formik-json`、`bun add @flipbyte/formik-json`

## README

# (原始内容存档于2013-10-12). formik-json

[由 Flipbyte 开发](https://www.flipbyte.com/)

[![Build Status](https://travis-ci.org/flipbyte/formik-json.svg?branch=master)](https://travis-ci.org/flipbyte/formik-json) [![npm package](https://img.shields.io/npm/v/@flipbyte/formik-json.svg)](https://www.npmjs.com/package/@flipbyte/formik-json) [![Coverage Status](https://coveralls.io/repos/github/flipbyte/formik-json-schema/badge.svg?branch=master)](https://coveralls.io/github/flipbyte/formik-json-schema?branch=master) [![license](https://badgen.now.sh/badge/license/MIT)](https://npmcn.com/package/%40flipbyte/formik-json/LICENSE) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/18e71277b7e94ad9aca885b5ba3d890c)](https://www.codacy.com/app/easeq/formik-json?utm_source=github.com&utm_medium=referral&utm_content=flipbyte/formik-json&utm_campaign=Badge_Grade)

formik-json是Formik方便地使用JSON /创建表格的包装器 用于定义元素的 Javascript 对象 .

## 实例

-   [演示](https://flipbyte.github.io/formik-json-schema)

## 先决条件

该组件依赖于几个第三方插件来添加WYSIWYG, 选择、自动完成、验证等。 很少有人已经打包过来了 和扩展名,不需要在您的 项目.

## 安装

您可以使用以下步骤安装 Formik-json .

```js
$ npm i @flipbyte/formik-json
```

### 快速启动指南

安装完成后,可以将表单添加到任何 构成部分如下:

#### 导入窗体组件

```js
import { Form } from '@flipbyte/formik-json';
```

##### 准备表单对象

```js
{
    "id": "my-new-form",
    "label": "My New Form",
    "type": "container",
    "renderer": "form",
    "elements": {
        "save": {
            "type": "field",
            "renderer": "button",
            "name": "save",
            "label": "Save",
            "htmlClass": "btn-success",
            "buttonType": "submit"
        },
        "main": {
            "type": "container",
            "renderer": "div",
            "htmlClass": "row",
            "elements": {
                "title": {
                    "name": "attributes.0.title",
                    "label": "Title",
                    "type": "field",
                    "renderer": "text",
                    "fieldType": "text"
                },
                ....
            }
        },
        ....
    }
}
```

##### 任意添加组件

```js
<Form
    schema={ /* Your form object here */ }
    { .../* Other formik props */ } />
```

### 窗体组件

* * *

窗体组件需要以下属性:

| 密钥 | 说明 |
| :-- | :-- |
| 计划 | 您的策略对象 |
| 更新时 | 更新值时调用 |
| 初始数值 | 检查[](https://jaredpalmer.com/formik/docs/api/formik) |
| Formik 属性 | 你可以添加任何一个 [](https://jaredpalmer.com/formik/docs/api/formik)组件道具 |

### Schema 对象

* * *

Schema 对象包含可以是2个类型之一的元素: “容器”或“场” 组件。 "集装箱"有一个"要素"键,你可以在里面 定义新容器或字段.

有下列密钥( 全部需要) 的 schema 对象 :

| 密钥 | 说明 |
| :-- | :-- |
| 编号 | 表格的标识 |
| 标签 | 表格的标题 |
| 类型 | "集装箱" |
| 渲染器 | "形式"(你可以使用其他渲染器,但如果你想使形式具有 `<form />` 标记使用"形式"渲染器. ) |
| 要素 | 是用来定义容器内元素的对象 |

注意: 计划对象只能有一个容器. 你可以拥有 主对象内多个容器和字段 计划对象 .

“元素”是具有键值对的对象,其中值是另一个 对象。 值对象可以是"容器"类型,也可以是"场"类型.

每个容器或字段都需要一个可使用 "投降者":"{你的 投降者}". 您可以定义您拥有的渲染器 容器和钥匙或使用随同模块而来的钥匙.

### 每种容器的属性如下:

#### 通用容器属性

| 不适用 | 外地 | 财产 | 说明 |
| :-- | :-- | :-: | :-- |
| 无 | 类型 | 字符串 | "集装箱" |
| 按钮组 | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
| 可编辑网格, 标签 | 要素 | {} | 是一个可以在其内放置一个或多个字段或容器的物体. |
| 可编辑网格, 按钮组 | 前缀Name 工具元素 | 布尔 |  |
|  | 显示时间 | 字符串 | 检查 [条件](https://github.com/flipbyte/when-condition) |
|  | 注释 | 字符串 | 注释/容器说明 |
|  | 注释分类 | 字符串 | 用于注释元素的 html 类 |

#### 集装箱特定特性

| 集装箱 | 外地 | 财产 | 说明 |
| :-- | :-- | :-: | :-- |
| 可编辑网格 | 渲染器 | 字符串 | 可编辑网格 |
|  | 字段 | {} | 键值对中具有一个或多个字段定义的对象 |
|  | 按钮 | `{"add": "Add", "remove": "X", "duplicate": "Duplicate"}` | 有三个属性,都是可选的。 这些可以是返回按钮的函数,也可以是作为按钮标签的字符串 |
|  | 是对象 | 布尔 | 网格是否显示对象。 如果设置为真,则按钮(添加、去除和复制)将被禁用. |
|  | 稳定 | 布尔 | 网格行是否可以被拖动和排序 |
|  | 表格容器分类 | 字符串 | 将可编辑网格覆盖到 htmlClass |
|  | 表格分类 | 字符串 | html 可编辑网格的分类 |
| 数字 | 渲染器 | 字符串 | 数字 |
|  | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
|  | html 分类 | 字符串 | div 元素的 html 分类 |
| html 标签 | 渲染器 | 字符串 | html 标签 |
|  | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
|  | 作为 | 字符串 | 要使用的 html 标签( 默认 : “ div ” ) |
|  | html 分类 | 字符串 | html 标签元素 |
| 字段集 | 渲染器 | 字符串 | 字段集 |
|  | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
|  | 标题 | 字符串 | 字段集的标签 |
|  | 卡片分类 | 字符串 | html 包装容器的分类 |
|  | 纸卡头类 | 字符串 | html 包装容器头的分类 |
|  | 纸卡头动作分类 | 字符串 | html 容器头部有披露按钮的容器分类 |
|  | 纸片组合 | 字符串 | html 容器体表 |
| 表单 | 渲染器 | 字符串 | 表单 |
|  | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
|  | html 分类 | 字符串 | 任何字符 |
| 选项卡 | 渲染器 | 字符串 | 选项卡 |
|  | 名称 | 字符串 | 用于在“前缀Name ToElement”设定为真实时将父容器的名称预先加到子字段. |
|  | 选项卡 | {} | 对象 |
|  | 卡片分类 | 字符串 | 与字段集相同 |
|  | 行分类 | 字符串 | 以 html 分类 显示行 |
|  | 选项卡列表 | 字符串 | html 标签列表的分类 |
|  | 选项卡列表项目分类 | 字符串 | html 标签列表项目分类 |
|  | 选项卡 | 字符串 | html 标签内容容器分类 |
|  | 选项卡 | 字符串 | html 标签容器分类 |
|  | 内容 | 字符串 | html 包装标签内容容器的分类 |
|  | 选项卡 | 字符串 | html 活动标签的分类 |
|  | 选项卡 | 字符串 | html 单标签面板的分类 |
| 按钮组 | 渲染器 | 字符串 | 按钮组 |
|  | 要素 | {} | 这些元素只能是类型: 有渲染器的"场":"按钮". |

### 以下是每种字段的属性

#### 常见字段属性

| 外地 | 类型 | 财产 | 说明 |  |
| :-- | :-- | :-: | :-- | --- |
|  | 名称 | 字符串 | html 字段名称属性 |  |
|  | 标签 | 字符串 | 字段的标签 |  |
|  | 类型 | 字符串 | "战地" |  |
|  | 标签分类 | 字符串 | 标签 html 元素的 html 类 |  |
|  | 组分类 | 字符串 | 用于覆盖窗体字段的 html 类 |  |
|  | 验证 | 字符串 | 检查 [yup-schema (法语)](https://github.com/flipbyte/yup-schema) |  |
|  | 显示时间 | 字符串 | 检查 [条件](https://github.com/flipbyte/when-condition) |  |
|  | 启用时 | 字符串 | 检查 [条件](https://github.com/flipbyte/when-condition) |  |
|  | 字段分类 | 字符串 | html 主 html/3- 第 阵型字段的 html 类 |  |
|  | 注释 | 字符串 | 注释/ 字段以下的说明 |  |
|  | 注释A | 字符串 | 定义用于包装注释的 HTML 标记。 (默认 : (中文(简体) ) |  |
|  | 注释分类 | 字符串 | 用于注释元素的 html 类 |  |
|  | 模板 | 反应组件 | 字符串 | 定义字段的自定义模板( 请检查 `src/Template/Default.js`)或使用 `registerTemplate` 然后将字符串密钥传递到这里 |
|  | 错误 | 字符串 | 定义用于包装错误的 HTML 标记。 (默认 :
(中文(简体) )

 |  |
|  | 错误分类 | 字符串 | 错误元素的 html 类 |  |

#### 字段特定属性

| 外地 | 类型 | 财产 | 说明 |
| :-- | :-- | :-: | :-- |
| 复选框 | 渲染器 | 字符串 | 复选框 |
|  | 名称 | 字符串 | html 字段名称属性 |
|  | 标签 | 字符串 | 字段的标签 |
|  | 类型 | 字符串 | "战地" |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
|  | 选项 | 阵列 | 带有“ 值” 和“ 标签” 键的天体阵列 |
| 代码编辑器 | 渲染器 | 字符串 | 代码编辑器 |
|  | 名称 | 字符串 | html 字段名称属性 |
|  | 标签 | 字符串 | 字段的标签 |
|  | 选项 | {} |  |
|  | 默认值 | 字符串 | 默认字段值( 未测试) |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
| 电台 | 渲染器 | 字符串 | 电台 |
|  | 名称 | 字符串 | html 字段名称属性 |
|  | 标签 | 字符串 | 字段的标签 |
|  | 选项 | {} |  |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
| 反应 - 选择 | 渲染器 | 字符串 | 反应 - 选择 |
|  | 名称 | 字符串 | html 字段名称属性 |
|  | 标签 | 字符串 | 字段的标签 |
|  | 选项 | {} | 带有值和标签密钥的对象数组。 示例 `[{"label": "Item 1", "value": "value-1"}]` |
|  | 默认值 | 字符串 | 默认字段值( 未测试) |
|  | 复数 | 布尔 | 是否为 mult 选择 |
|  | 可打开 | 布尔 | 在选中位置上显示一个清晰的选定按钮,该按钮将清除选定的选项 |
|  | 已失效 | 布尔 | 设定为正则时禁用选择 |
|  | 无选项 | 函数 | 参考 [重现选择道具](https://react-select.com/props) |
| 切换 | 渲染器 | 字符串 | 切换 |
| 文本 | 渲染器 | 字符串 | 文本 |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
|  | 字段类型 | 字符串 | HTML 输入类型. 输入的值  |
|  | 默认值 | 字符串 | 默认字段值( 未测试) |
|  | 图标 | 字符串 | 字体优美图标类 |
|  | 输入组分类 | 字符串 | html 类,用于将图标和输入元素组合在一起的潜水 |
| 文本区域 | 渲染器 | 字符串 | 文本区域 |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
|  | 行数 | 数目 | 默认显示文本区域容器的行数 |
| 维西维格语name | 渲染器 | 字符串 | 维西维格语name |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
|  | 选项 | {} | [React-quill wysiwyg 选项](https://github.com/zenoamaro/react-quill) |
|  | 行数 | 数目 | Wysiwyg 容器默认显示的行数 |
|  | 文本区域分类 | 字符串 | 用于显示 wysiwyg 输入的内容的原始 html 的文本区域类别 |
| 自动补全 | 渲染器 | 字符串 | 自动补全 |
|  | 属性 | {} | 是一个可以持有其它 html 字段相关属性(如果有) 的对象。 只使用没有使用任何其他密钥定义的密钥 。 例如:名称已经拥有自己的密钥,因此属性对象内的"名"密钥将无所作为. |
|  | 默认值 | 字符串 | 默认字段值( 未测试) |
|  | 选项 | {} | 可用选项 [反应自动推荐插件](https://github.com/moroshko/react-autosuggest) |
| 文件上加载器 | 渲染器 | 字符串 | 文件装入器 |
|  | 选项 | {} | 可用选项 [反应-投放区插件](https://react-dropzone.js.org/) |
|  | 组分类 | 字符串 | 用于覆盖窗体字段的 html 类 |
| 内文本 | 渲染器 | 字符串 | 内文本 |
|  | 作为 | 字符串 | 用于内文本字段的 HTML 标签 |
|  | html 分类 | 字符串 | 用于标签的 HTML 类 |
|  | 默认值 | 字符串 | 或用作 HTML 元素的静态值, 或在未定义时用作占位符 |
| 按钮 | 渲染器 | 字符串 | 按钮 |
|  | 内容 | 字符串 | 按钮内 html |

## 谢谢

如有建议、意见或想法,可制定更多的 解决方案,你可以给我们写信 [Flipbyte.com (英语)](https://www.flipbyte.com/#ht-top-footer)欢迎公关.

## 许可证

《麻省理工学院许可证》

## 常见问题

### @flipbyte/formik-json 是什么？

formik-json是Formik方便地使用 JSON / Javascript 对象创建用于定义元素的表单的包装器

### 如何安装 @flipbyte/formik-json？

在项目目录运行 npm install @flipbyte/formik-json，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：lodash（^4\.17\.13）、react（^16\.8\.6）、react-dom（^16\.8\.6）、prop-types（^15\.6\.2）、@fortawesome/fontawesome-free（^5\.6\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flipbyte/formik-json 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flipbyte\_\_formik-json 是否存在。

### @flipbyte/formik-json 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flipbyte/formik-json 可以商用吗？

@flipbyte/formik-json 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flipbyte/formik-json 的下载量有多少？

根据 npm 官方下载统计，@flipbyte/formik-json 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,553 次，日均约 85 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flipbyte/formik-json 还在维护吗？

最新版本 0\.6\.2 发布于 2022/01/25（4 年前）；至今共发布 36 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。