Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek

// Beispielsweise sieht die Zuordnung unter antd wie folgt aus:
exportiere const Zuordnung = {
 Standard: „Eingabe“,
 Zeichenfolge: "Eingabe",
 Array: "Liste",
 Boolesch: 'Kontrollkästchen',
 Ganzzahl: 'Zahl',
 Nummer: 'Nummer',
 Objekt: "Karte",
 html: "html",
 'string:upload': 'hochladen',
 'Zeichenfolge:Datum': 'Datum',
 'Zeichenfolge:Datum/Uhrzeit': 'Datum',
 'Zeichenfolge:Zeit': 'Datum',
 'string:textarea': 'Textbereich',
 'Zeichenfolge:Farbe': 'Farbe',
 'Zeichenfolge:Bild': 'Eingabe',
 'Zeichenfolge: E-Mail': 'Eingabe',
 'Zeichenfolge: URL': 'URL',
 'Bereich:Datum': 'Datumsbereich',
 'Bereich:Datum/Uhrzeit': 'Datumsbereich',
 '*?enum': 'auswählen',
 'Array?enum': 'Kontrollkästchen',
};

importiere React, { useState } von 'react';
importiere FormRender aus „form-render/lib/antd“;

const schema = {
 Typ: "Objekt",
 Eigenschaften:
 wählen: {
  Titel: 'Single Choice',
  Typ: "Zeichenfolge",
  Aufzählung: ['a', 'b'],
  enumNames: () => ['Eingabefeld anzeigen', 'Eingabefeld ausblenden'],
  'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5,
  'ui:widget': 'Radio',
 },
 Eingabe1: {
  Titel: 'Eingabefeld',
  Beschreibung: 'Versuchen Sie, mehr als 5 Zeichen einzugeben',
  Typ: "Zeichenfolge",
  'ui:hidden': (Formulardaten, Stammwert) => Formulardaten.select === 'b',
 },
 },
};

const Demo1 = () => {
 const [formData, setFormData] = useState({});
 zurückkehren (
 <FormRender schema={schema} formData={formData} onChange={setFormData} />
 );
};

Standard-Demo1 exportieren;

importiere React, { useState, useEffect } von „react“;
FormRenderer aus „zarm-form-render“ importieren;
importiere { Input, Zelle, Radio, Auswahl, Datumsauswahl, Schaltfläche, Toast, Panel } aus „zarm“;

exportiere Standardfunktion App() {
 const [Daten, setze Daten] = useState({});

 const layoutData = [
 {
  Typ: Eingabe,
  Bezeichnung: „Name des Versicherten“,
  Platzhalter: 'Bitte ausfüllen',
  Name: "Name",
 },
 {
  Typ: Radio.Group,
  Bezeichnung: "Geschlecht",
  Name: 'Geschlecht',
  elProps: {
  Typ: "Schaltfläche",
  Geist: wahr,
  },
  Artikel: [
  { label: 'männlich', value: 'männlich' },
  { label: 'weiblich', value: 'weiblich' },
  ],
 },
 {
  rendern() {
  wenn (!data.gender) null zurückgibt;
  return <Cell title="Sie sind" description={data.gender === 'männlich' ? 'Junge' : 'Mädchen'}></Cell>;
  },
 },
 {
  Typ: Auswählen,
  Etikett: 'Lieblingsfrucht',
  Name: 'Lieblingsessen',
  elProps: {
  Datenquelle: [
   { Bezeichnung: 'Apfel', Wert: 'Apfel' },
   { Bezeichnung: 'Banane', Wert: 'Banane' },
  ],
  },
 },

 {
  Typ: DateSelect,
  Beschriftung: 'Geburtsdatum',
  Titel: „Geburtsdatum der versicherten Person“,
  Platzhalter: 'Bitte auswählen',
  Name: 'Geburtstag',
  min: '1900-01-01',
 },
 {
  Typ: Eingabe,
  Bezeichnung: 'Mobiltelefonnummer',
  Platzhalter: 'Bitte ausfüllen',
  Name: "mobile",
 },
 {
  rendern() {
  Geben Sie <div style={{ margin: '30px 6px',}}></div> zurück;
  },
 },
 {
  rendern() {
  zurückkehren (
   <Panel title="Von Ihnen eingegebener Inhalt">
   <div Stil = {{ Rand: '10px 6px' }}> {JSON.stringify(Daten)}</div>
   </Panel>
  );
  },
 },
 ];

 zurückkehren (
 <div>
  <FormRenderer layoutData={layoutData} data={data} setData={setData} />
  <Button-Blockthema="primär" bei Klick={() => Toast.show(JSON.stringify(data))}>
  OK</Button>
 </div>
 );
}

importiere React von „react“;
importiere { Zelle, Radio, DateSelect, Auswahl } aus 'zarm';

// Verwenden Sie für Situationen, in denen eine Konfiguration nicht möglich ist (z. B. benutzerdefinierte Komponenten, Komponenten, die basierend auf Bedingungen angezeigt werden müssen usw.), bitte die Rendermethode.
// getJSON() gibt JSON dynamisch zurück
// render() Benutzerdefiniertes Rendern

Exportieren Sie die Standardfunktion FormRenderer ({ Layoutdaten, Daten, Daten festlegen }) {
 const onFiledChange = (Name, Wert) => {
 sei v = Wert;

 // für Select ctrl
 wenn (Array.isArray(Wert)) {
  v = Wert.Map((Element) => Element.Wert)[0];
 }

 setData({ ...data, [name]: v });
 };

 const onChangeFactory = (Name) => (Wert) => onFiledChange(Name, Wert);

 zurückkehren (
 <div Klassenname="Renderer">
  {layoutData.map((item, idx) => {
  wenn (Typ des Elements.getJSON === 'Funktion') {
   Artikel = Artikel.getJSON();
  }
  wenn (Elementtyp !== 'Objekt' || !Element) null zurückgeben;
  Konstante {
   Name,
   Typ,
   Beschreibung,
   Artikel,
   elProps = {},
   ZelleProps = {},
   machen,
   ...Requisiten
  } = Artikel;

  wenn (Rendertyp === 'Funktion') {
   rendern zurückgeben();
  }

  lass Kinder = [];
  wenn (Array.isArray(items) und Typ === Radio.Group) {
   Kinder = Elemente.map((it, idx1) => (
   <Radiowert={it.value} Schlüssel={idx1}>
    {it.label}
   </Radio>
   ));
  }

  Eigenschaften.Wert = Daten[Name];
  props.onChange = onChangeFactory(name);

  wenn (Typ === Auswählen) {
   props.dataSource = Elemente;
  }
  wenn (Typ === Datumsauswahl || Typ === Auswahl) {
   props.onOk = props.onChange;
   props.onChange löschen;
   props.onChange = elProps.onChange;
  }

  zurückkehren (
   <Zellenschlüssel={idx} Titel={item.label} Beschreibung={Beschreibung} {...cellProps} Name={Name}>
   {React.createElement(Typ, { ...Requisiten, ...elProps }, ...Kinder)}
   </Cell>
  );
  })}
 </div>
 );
}

importiere * als React von „react“;
Exportschnittstelle Element {
 Typ: React.Component; // Komponententyp, z. B. Eingabe usw. Name: Zeichenfolge; // Schlüssel
 Elemente?: Array<beliebig>; // Datenquelle
 Beschreibung: Zeichenfolge; // Zellenbeschreibung
 label?: string; // Zellentitel
 rendern?: () => React.ReactNode; //Benutzerdefiniertes Rendern
 getJSON?: () => Objekt | null; // Elementkonfiguration dynamisch zurückgeben elProps?: Objekt; // Konfiguration der Komponenteneigenschaften, z. B. wenn der Typ „Eingabe“ ist, wird elProps auf „Eingabe“ konfiguriert
 cellProps?: Objekt; // Konfiguration der Zelleneigenschaften}
Exportschnittstelle Props {
 layoutData: Array<Item>; // Formularlayout-Konfigurationsdaten: Objekt; // Datenspeicher, Name als Schlüssel, Inhalt als Wert
 setData: () => void; // Datenaktualisierung}
Schnittstelle FormRenderer erweitert React.FC<Props> {}
Deklarieren Sie const FormRenderer: FormRenderer;
Standard-FormRenderer exportieren;