UI-Schema 使用教程

殷巧或

于 2024-08-30 09:45:55 发布

阅读量510

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00061/article/details/141708429

版权

UI-Schema 使用教程

ui-schemaUse JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets.项目地址:https://gitcode.com/gh_mirrors/ui/ui-schema

项目介绍

UI-Schema 是一个基于 React 的开源项目，旨在使用 JSON-Schema 生成表单和用户界面。它支持任何设计系统，并简化了复杂自定义小部件的创建过程。UI-Schema 提供了对 Material-UI 的一流支持，并允许开发者轻松创建自己的小部件和插件。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 UI-Schema：

npm install @ui-schema/ui-schema @ui-schema/ds-material

创建一个简单的表单

以下是一个简单的示例，展示如何使用 UI-Schema 创建一个表单：

import React from 'react';
import { UISchema, UISchemaProvider, WidgetsBinding } from '@ui-schema/ui-schema';
import { widgets } from '@ui-schema/ds-material/widgetsBinding';

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'integer' },
  },
};

const MyForm = () => (
  <UISchemaProvider widgets={widgets}>
    <UISchema schema={schema} />
  </UISchemaProvider>
);

export default MyForm;

运行应用

将上述代码保存为一个 React 组件，并在你的应用中引入并使用它。确保你的 React 应用已经设置好，然后运行：

npm start

应用案例和最佳实践

自定义小部件

UI-Schema 允许你创建自定义小部件。以下是一个自定义文本输入小部件的示例：

import React from 'react';
import { createWidget } from '@ui-schema/ui-schema';

const CustomTextInput = ({ value, onChange }) => (
  <input
    type="text"
    value={value}
    onChange={(e) => onChange(e.target.value)}
  />
);

const customWidgets = {
  text: createWidget(CustomTextInput),
};

const CustomForm = () => (
  <UISchemaProvider widgets={{ ...widgets, ...customWidgets }}>
    <UISchema schema={schema} />
  </UISchemaProvider>
);

export default CustomForm;

表单验证

UI-Schema 内置了表单验证功能。以下是一个带有验证的表单示例：

const schemaWithValidation = {
  type: 'object',
  properties: {
    name: { type: 'string', minLength: 3 },
    age: { type: 'integer', minimum: 18 },
  },
};

const ValidatedForm = () => (
  <UISchemaProvider widgets={widgets}>
    <UISchema schema={schemaWithValidation} />
  </UISchemaProvider>
);

export default ValidatedForm;