基于 React 的表单，可以通过 json 渲染

Question

我正在寻找任何基于 ReactJS 的库，它利用 json 作为输入并相应地呈现 HTML。如果它可以对最终用户的输入进行自动验证，那就太好了。例如，它采用具有数组的 json 输入并将其呈现为 HTML 选择控件。

此外，该库应该可以在没有 Nodejs 的情况下使用，我的意思是在简单的 Web 应用程序中，例如基于 Asp.Net MVC 的 Web 应用程序。如果有示例和良好的文档就更好了。

Answer 1

我推荐反应声明式。该视图引擎支持具有 200 多个字段的大型表单，具有纯函数输入验证和隐藏/显示字段组

链接到游乐场

import { TypedField, FieldType } from "react-declarative";

export const fields: TypedField[] = [
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "General Information",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "first_name",
        title: 'First Name',
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "last_name",
        title: 'Last Name',
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "middle_name",
        title: "Middle Name",
      },
      {
        type: FieldType.Text,

        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "phone",
        title: "Phone",
        inputFormatterAllowed: /^[0-9]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "additional_phone",
        title: 'Additional Phone',
        inputFormatterAllowed: /^[0-9]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "email",
        title: 'Email',
      },
      {
        type: FieldType.Items,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "source",
        title: 'Source',
        itemList: ["Telegram", "Facebook", "Instagram"],
      },
      {
        type: FieldType.Items,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "looking_for",
        title: "Looking For",
        itemList: ["House", "Garage"],
      },
    ],
  },
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "Passport Information",
      },
      {
        type: FieldType.Text,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "series_number",
        title: "Series Number",
      },
      {
        type: FieldType.Text,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "issued_by",
        title: "Issued By",
        inputFormatterAllowed: /^[0-9 A-Za-z]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "birth_date",
        title: 'Birth Date',
      },
      {
        type: FieldType.Combo,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "country",
        title: 'Country',
        defaultValue: "USA",
        itemList: [
          "USA",
          "Turkey",
          "China"
        ],
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "given_date_from",
        title: "Date Issued",
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "given_date_to",
        title: 'Expiration Date',
      },
    ],
  },
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "Other",
      },
      {
        type: FieldType.Combo,
        title: 'Profile Status',
        outlined: false,
        itemList: ["First contact", "Active", "Inactive"],
        name: "profile_status",
      },
      {
        type: FieldType.Items,
        outlined: false,
        itemList: ["Group 1"],
        name: "profile_group",
        title: 'Profile Group',
      },
      {
        type: FieldType.Text,
        outlined: false,
        name: "comment",
        title: 'Comment',
        inputRows: 3,
      },
    ],
  },
];