组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form...

最新推荐文章于 2024-10-18 11:59:46 发布
最新推荐文章于 2024-10-18 11:59:46 发布
阅读量1.2k 收藏
点赞数
分类专栏： 组件分享之前端 文章标签： 前端 react.js json javascript ecmascript
https://creativecommons.org/licenses/by-nc/4.0/
本文链接：https://blog.csdn.net/csde12/article/details/124838035
版权
本文介绍了React组件react-jsonschema-form，这是一个用于从JSONSchema自动生成Web表单的库。支持多种主题如AntDesign、Bootstrap等，并提供了详细的使用教程。通过npm安装或CDN引入即可使用，方便快捷。
摘要由CSDN通过智能技术生成

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form

背景

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

组件基本信息

内容

本次分享的组件是用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form，它能够使用JSON Schema以声明方式构建和自定义 Web 表单。

image.png

它支持很多种主题，详见下方

具体使用方式如下：
1、安装

npm install @rjsf/core --save

2、导入依赖使用

import Form from "@rjsf/core";

作为CDN提供的脚本

<script src="https://unpkg.com/@rjsf/core/dist/react-jsonschema-form.js"></script>

更多使用方式可以查看其官网提供的各个组件详细使用说明。

本文声明：
88x31.png
知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
CN華少
关注
专栏目录
react-reactjsonschemaform一个React组件用于从JSONSchema构建Web表单
08-15
react-jsonschema-form - 一个React组件用于从JSONSchema构建Web表单
react-jsonschema-form：一个用于从JSON模式构建Web表单的React组件
02-03
react-jsonschema-form 一个简单的组件，能够使用声明性地构建和定制Web表单。 ·· 支持的主题 文献资料 阅读“阅读上的文档。 现场游乐场 gh页上有一个。 贡献 阅读我们的以开始使用。 学分 由BrowserStack支持的测试
解决方案：React-JSON-Schema-Form 开源项目入门指南及问题应对
gitblog_01291的博客
10-18 648
解决方案：React-JSON-Schema-Form 开源项目入门指南及问题应对 react-jsonschema-form A React component for building Web forms from JSON Schema. ...
react-json-schema-form-builder:基于JSON模式的表单的可视化编辑器，内置在React JS中
04-28
React JSON模式表单编辑器 该存储库包含一个称为FormBuilder的React JS组件的代码，该代码允许用户通过拖放，编辑卡元素来直观地配置。 该工具的一个示例用例可能是构建一个允许用户创建和分发自己的调查的应用程序。 React JSON Schema Form Builder提供了允许用户动态构建此类调查表的组件。 表单生成器也可以自定义，并且可以合并由构建调查创建应用程序的开发人员指定的新颖表单元素（例如特殊的电子邮件地址或文件上传输入）。 该组件包裹在一个演示应用程序中，该应用程序演示了如何将该工具与代码编辑器和结合使用，以构建表单并实时维护其实时代码表示。 表单生成器可作为NPM软件包获得。 查看的表单生成器 可获得更多详细文档 快速开始 npm i --save @ginkgo-bioworks/react-json-schema-form-builder
React Json Schema Form (Material UI): 构建高效且美观的表单解决方案
gitblog_00057的博客
06-12 1001
React Json Schema Form (Material UI): 构建高效且美观的表单解决方案 universal-json-schema:scroll: Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON S...
react-jsonschema-form 使用教程
gitblog_01091的博客
08-09 1058
react-jsonschema-form 使用教程 项目地址:https://gitcode.com/gh_mirrors/re/react-jsonschema-form 项目介绍 react-jsonschema-form 是一个简单的 React 组件，能够根据 JSON Schema 构建 HTML 表单。该项目旨在自动生成基于 JSON Schema 的 React 表单。如果你需要为...
react-json-editor：用于使用JSON-Schema进行响应的动态表单组件
02-03
react-json-editor 这是丛状叉，意在保持 使用基于的规范格式的动态表单组件。 演示的完整代码可以在找到。 react-json-editor使用一个JavaScript对象来... var Form = require ( 'react-json-editor' ) ; var sch
react-jsonschema-form-builder:它是“ Json Schema”的可视化构建器，可导出为生成的“ Json Schema”而生成的“ Json Schema”，然后将该模式的结构粘贴到您的react-jsonschema-form组件中
05-13
$ npm install react-jsonschema-form-builder 设计如何变化？ 您可以进行分叉并更改此程序包@ rjsf / material-ui要观看其他可用选项，请阅读 执行 import React from 'react' ; import seed from './seed.json'...
一个从JSON Schema构建Web表单的React组件。-React开发
05-27
由BrowserStack文档提供技术支持的测试托管在react-jsonschema-form一个简单的React组件中，该组件能够从JSON模式中构建HTML表单，并且默认情况下使用Bootstrap语义。 由BrowserStack文档提供支持的测试文档托管于：...
react-json-schema:使用映射到React组件的JSON模式配置和构建视图
05-17
react-json-schema npm install react-json-schema 通过将JSON定义映射到React组件来从JSON构造React元素。 将react-json-schema用于数据驱动的布局，或用作React组件和道具的抽象层。 渲染到任何地方（只要是DOM）！ 由于react-json-schema不执行任何渲染，因此您要使用的渲染方法由您决定。 例如，您可以根据需要使用ReactDOMServer.render，ReactDOM.renderToString等。 这也意味着JSX不是react-json-schema的依赖项。 完整文件 架构图 所需的主要资源是JSON或JavaScript对象文字中的已定义架构。 建议架构属性主要定义React组件prop。 解析器显式处理以下属性： component ：必须存在并由字符串或React组件定义
react-schema-form:基于json模式对表单进行React以进行表单生成和验证
05-02
React模式 根据json模式对表单进行以进行表单生成和验证。 这是使用作为基础组件的项目的端口。 现场演示 在尝试演示表单时，可以在json编辑器中更新架构和表单，以查看即时重新呈现的表单。 这是一种以交互方式构建表单的方法。 例子 如果您尚未在全球范围内安装babel-cli，请先进行安装。 sudo npm install -g babel-cli 克隆项目并运行 cd react-schema-form npm install cd example yarn npm start 然后在浏览器中打开localhost：8080。 安装 npm install react-schema-form --save 在组件react-schema-form-rc-select上添加了一个选项，用于多个选择并从服务器动态加载下拉列表。 要安装它。 npm install react-
react-jsonschema-form-ui：react-jsonschema-form包的替代小部件
02-18
React Json Schema表单用户界面 添加到您的项目 yarn add react-jsonschema-form-ui 或者 npm install react-jsonschema-form-ui 然后 import { ArrayFieldTemplate, CurrencyWidget, PercentWidget, RawHTMLField, ReactDatePickerWidget, ReactSelectWidget, ReactSignatureCanvasField, StatesWidget } from 'react-jsonschema-form-ui'; const widgets = { CurrencyWidget: CurrencyWidget, PercentWidget: Percen
前端开源库-json-schema-to-markdown
08-29
前端开源库-json-schema-to-markdownJSON模式到Markdown，将JSON模式转换为Markdown文件。
json-schema-viewer：JSON模式查看器React组件
02-03
@ stoplight / json-schema-viewer JSON模式查看器React组件 探索组件： 查看更改日志： 产品特点 全面的JSON Schema Draft 4支持，包括oneOf和anyOf组合器属性 将复杂的嵌套对象渲染到任何深度 渲染验证属性和降价描述 能够链接已解决的$ refs 可主题化 可折叠 安装 在现代浏览器和节点中受支持。 # latest stable yarn add @stoplight/json-schema-viewer 用法 // index.jsx import { JsonSchemaViewer } from " @stoplight/json-schema-viewer " ; < JsonSchemaViewer name = " Todos Model " schema = { schema } expanded = { true } hideTopBar = { false } emptyText = " No schema defined " defaultExpandedDepth =
react-jsonschema-table:React组件使用JSON Schema规范生成表
04-29
react-jsonschema-table 简单的用法通过inifnite滚动来响应组件样式表，以消耗大量数据并使用JSONSchema作为数据结构进行行编辑。 工作正在进行中 ！ 安装 npm install --save react-jsonschema-table 简单用法 import React , { Component } from 'react' import Table from 'react-jsonschema-table' const schema = { properties : { name : { type : 'string' , title : 'Name' , } , lastName : { type : 'string' , title : 'LastName' ,
json-schema-editor-visual:基于React的高效且易于使用的json模式编辑器
05-23
json模式编辑器可视 基于React的高效且易于使用的json模式编辑器。 用法 npm install json-schema-editor-visual const option = { } import 'antd/dist/antd.css' require ( 'json-schema-editor-visual/dist/main.css' ) const schemaEditor = require ( "json-schema-editor-visual/dist/main.js" ) ; const SchemaEditor = schemaEditor ( option ) render ( < SchemaEditor> , document . getElementById ( 'root' ) ) 期权对象 名称 描述 默认 lg 语言，
探索React JSONSchema Form：构建高效、灵活的表单利器
gitblog_00021的博客
03-26 484
探索React JSONSchema Form：构建高效、灵活的表单利器 react-jsonschema-form项目地址:https://gitcode.com/gh_mirrors/rea/react-jsonschema-form 在Web开发中，创建和管理表单往往是复杂且繁琐的任务，特别是在处理动态数据和复杂的业务逻辑时。然而，有了，这个问题变得简单多了。这是一个由Mozilla Se...
react-jsonschema-form 项目教程
gitblog_00153的博客
08-09 416
react-jsonschema-form 项目教程 项目地址:https://gitcode.com/gh_mirrors/re/react-jsonschema-form 1. 项目的目录结构及介绍 react-jsonschema-form/ ├── docs/ │ └── 项目文档文件 ├── packages/ │ ├── @rjsf/core/ │ │ └── 核心包文...
探索React JSON Schema Form：构建高效、灵活的Web表单利器
gitblog_00065的博客
03-19 808
探索React JSON Schema Form：构建高效、灵活的Web表单利器 项目地址:https://gitcode.com/gh_mirrors/re/react-jsonschema-form 本文将向您介绍一款强大的前端开发工具——，它是一个基于React的库，可以帮助开发者轻松地根据JSON Schema创建交互式表单。通过深入理解其工作原理、应用场景和核心特性，您可以利用这个项目提...
react-jsonschema-form 表单 label 同一行显示
最新发布
10-19
React-jsonschema-form允许自定义表单组件，包括label的位置。要让label与输入字段在同一行显示，你可以使用`Form`组件的`customFieldComponents`选项，以及自定义一个展示label和input的`Field`组件。 **示例**: ```jsx import React from "react"; import { Form, registerCustomValidator } from "react-jsonschema-form"; // 自定义 Field 组件，使 label 和 input 在同一行 const CustomField = ({ schema, meta, parent, formState, id, ...rest }) => { const { required, title } = schema.properties || {}; return ( <div> {title && <label htmlFor={id}>{title}</label>} <input {...rest} id={id} /> </div> ); }; // 注册自定义 Field registerCustomValidator("required", (value) => Boolean(value)); <Form schema={yourSchema} customFieldComponents={{ Field: CustomField }} /> ``` 在这个例子中，`CustomField`组件接收schema信息并使用`title`属性作为label。这样，当渲染表单时，每个字段的标题就会直接放在其对应的输入框上方，形成同一行显示的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CN華少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值