Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

// たとえば、antd でのマッピングは次のようになります。
エクスポートconstマッピング = {
 デフォルト: 'input'、
 文字列: '入力',
 配列: 'リスト',
 ブール値: 'チェックボックス',
 整数: '数値',
 番号: '番号',
 オブジェクト: 'map',
 html: 'html',
 '文字列:アップロード': 'アップロード',
 '文字列:日付': '日付',
 '文字列:dateTime': '日付',
 '文字列:時間': '日付',
 '文字列:テキストエリア': 'テキストエリア',
 '文字列:色': '色',
 '文字列:画像': '入力',
 '文字列:メール': '入力',
 '文字列:url': 'url',
 '範囲:日付': '日付範囲',
 '範囲:dateTime': '日付範囲',
 '*?enum': '選択',
 '配列?列挙': 'チェックボックス',
};

React をインポートし、{useState} を 'react' から取得します。
'form-render/lib/antd' から FormRender をインポートします。

定数スキーマ = {
 タイプ: 'オブジェクト'、
 プロパティ:
 選択: {
  タイトル: 「シングルチョイス」
  タイプ: '文字列',
  列挙型: ['a', 'b'],
  enumNames: () => ['入力ボックスを表示', '入力ボックスを非表示'],
  'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5,
  'ui:widget': 'ラジオ',
 },
 入力1: {
  タイトル: 「入力ボックス」、
  説明: '5文字以上入力してください'、
  タイプ: '文字列',
  'ui:hidden': (formData, rootValue) => formData.select === 'b',
 },
 },
};

定数Demo1 = () => {
 const [formData、setFormData] = useState({});
 戻る （
 <FormRender schema={schema} formData={formData} onChange={setFormData} />
 );
};

デフォルトのDemo1をエクスポートします。

'react' から React をインポートします。{useState、useEffect}。
'zarm-form-render' から FormRenderer をインポートします。
'zarm' から { Input、Cell、Radio、Select、DateSelect、Button、Toast、Panel } をインポートします。

デフォルト関数App()をエクスポートする{
 const [データ、setData] = useState({});

 定数レイアウトデータ = [
 {
  タイプ: 入力、
  ラベル: '被保険者の名前'、
  プレースホルダー: '記入してください'、
  名前: '名前',
 },
 {
  タイプ: Radio.Group、
  ラベル: '性別'、
  名前: '性別',
  プロパティ: {
  タイプ: 'ボタン'、
  幽霊：本当だ、
  },
  アイテム: [
  { ラベル: '男', 値: 'male' },
  { ラベル: '女', 値: '女性' },
  ]、
 },
 {
  与える（） {
  if (!data.gender) が null を返す;
  <Cell title="あなたは" description={data.gender === '男性' ? '男の子' : '女の子'}></Cell> を返します。
  },
 },
 {
  タイプ: 選択、
  ラベル: 「好きなフルーツ」
  名前: 'favfood',
  プロパティ: {
  データソース: [
   { ラベル: 'apple'、値: 'apple' },
   { ラベル: 'バナナ'、値: 'バナナ' },
  ]、
  },
 },

 {
  タイプ: DateSelect、
  ラベル: '生年月日'、
  タイトル: 「被保険者の生年月日」
  プレースホルダ: '選択してください'、
  名前: '誕生日',
  最小: '1900-01-01',
 },
 {
  タイプ: 入力、
  ラベル: '携帯電話番号'、
  プレースホルダー: '記入してください'、
  名前: 'モバイル',
 },
 {
  与える（） {
  <div style={{ margin: '30px 6px',}}></div> を返します。
  },
 },
 {
  与える（） {
  戻る （
   <Panel title="入力したコンテンツ">
   <div style={{ margin: '10px 6px' }}>{JSON.stringify(data)}</div>
   </パネル>
  );
  },
 },
 ];

 戻る （
 <div>
  <FormRenderer layoutData={layoutData} data={data} setData={setData} />
  <ボタン ブロック theme="primary" onClick={() => Toast.show(JSON.stringify(data))}>
  OK</ボタン>
 </div>
 );
}

'react' から React をインポートします。
'zarm' から { Cell、Radio、DateSelect、Select } をインポートします。

// 設定が不可能な場合（カスタムコンポーネント、条件に基づいて表示する必要があるコンポーネントなど）は、render メソッドを使用してください。
// getJSON() は動的に json を返します
// render() カスタムレンダリング

デフォルトの関数 FormRenderer({ layoutData, data, setData }) をエクスポートします。
 const onFiledChange = (名前、値) => {
 v = 値とします。

 // 選択コントロール用
 Array.isArray(値)の場合{
  v = value.map((item) => item.value)[0];
 }

 setData({ ...データ、[名前]: v });
 };

 const onChangeFactory = (名前) => (値) => onFiledChange(名前、値);

 戻る （
 <div className="レンダラー">
  {layoutData.map((item, idx) => {
  if (typeof item.getJSON === 'function') {
   アイテム = item.getJSON();
  }
  if (typeof item !== 'object' || !item) は null を返します。
  定数{
   名前、
   タイプ、
   説明、
   アイテム、
   elProps = {},
   セルプロパティ = {},
   与える、
   ...小道具
  } = 項目;

  if (typeof render === 'function') {
   レンダリング() を返します。
  }

  children = [] とします。
  if (Array.isArray(items) && type === Radio.Group) {
   子 = items.map((it, idx1) => (
   <ラジオ値={it.value} キー={idx1}>
    {it.label}
   </ラジオ>
   ));
  }

  props.value = データ[名前];
  プロパティの onChange = onChangeFactory(名前);

  if (type === Select) {
   props.dataSource = アイテム;
  }
  if (type === DateSelect || type === Select) {
   プロパティを onOk に設定すると、プロパティが onChange になります。
   props.onChange を削除します。
   プロパティのonChange = elProps.onChange;
  }

  戻る （
   <セルキー={idx} タイトル={item.label} 説明={description} {...cellProps} 名前={name}>
   {React.createElement(type, { ...props, ...elProps }, ...children)}
   </セル>
  );
  })}
 </div>
 );
}

'react' から * を React としてインポートします。
エクスポートインターフェースアイテム{
 type: React.Component; // Input などのコンポーネント タイプ name: string; // キー
 items?: Array<any>; // データソース
 description: string; // セルの説明
 label?: string; // セルのタイトル
 render?: () => React.ReactNode; //カスタムレンダリング
 getJSON?: () => object | null; // 動的にアイテム構成を返します elProps?: object; // コンポーネントのプロパティ構成。たとえば、タイプが Input の場合、elProps は Input に構成されます
 cellProps?: object; // セルプロパティの設定}
エクスポートインターフェースProps {
 layoutData: Array<Item>; // フォームレイアウト構成 data: object; // データストレージ、名前をキー、コンテンツを値として
 setData: () => void; // データの更新}
インターフェース FormRenderer は React.FC<Props> を拡張します {}
const FormRenderer を宣言します: FormRenderer;
デフォルトの FormRenderer をエクスポートします。