时间戳

首页 > 解决方案 > 如何在 React Js 中根据 json 类型的 aaray 显示 3 个或更多表单以构建动态表单

json - 如何在 React Js 中根据 json 类型的 aaray 显示 3 个或更多表单以构建动态表单

问题描述

const fields = { { id: 1, type: 'group', }, { id: 2, type: 'text', label: 'Name', group_id: 1 }, { id: 3, type: 'text',标签：'地址'，group_id：1 }，{ id：4，类型：'text'，标签：'City'，值：'Lahore'，group_id：1 }，{ id：5，类型：'text'，标签：'State'，值：'Punjab'，group_id：1 }，{ id：6，类型：'text'，标签：'Country'，值：'Pakistan'，group_id：1}，{ id：7， type: 'group', }, { id: 8, type: 'date', label: 'Date ofbirth', group_id: 7 }, { id: 9, type: 'email', label: 'Email', group_id : 7 }, { ID: 10,类型：'电话'，标签：'电话'，组 ID：7 }，{ id：11，类型：'颜色'，标签：'颜色'，值：'#ff9900'，组 ID：7 }，{ id：12 , type: 'number', label: 'Age', value: 22, group_id: 7 }, { id: 13, type: 'number', label: 'Friends', value: 3, group_id: 7 }, { id ：14，类型：'select_one'，标签：'选择一个城市'，值：'karachi'，选择：['lahore'，'karachi'，'multan'，'faisalabad'，'pishawar'，'queta'， 'islamabad'] group_id: 7 }, { id: 15, type: 'select_one', label: 'Select One Fruit', value: 'peach', 选择: ['apple', '香蕉'，'芒果'，'桃子'，'葡萄'，'松树'，'草莓'] group_id: 7 } }

标签： jsonreactjscomponents

解决方案

这是您的 JSON 对象的正确语法。

 [ 
 { "id": 1,
   "type": "group" 

 },
 { 
  "id": 2,
  "type": "text",
  "label": "Name",
  "group_id": 1 
 },
 { "id": 3,
   "type": "text",
   "label": "Address", 
   "group_id": 1   
},
{ "id": 4,
  "type": "text",
  "label": "City",
  "value": "Lahore",
  "group_id": 1 
}, 
{  "id": 5,
   "type": "text", 
   "label": "State", 
   "value": "Punjab",
   "group_id": 1 
}, 
{ "id": 6,
"type": "text", 
"label": "Country", 
"value": "Pakistan",
"group_id": 1
}, 
{ 
  "id": 7, 
  "type": "group"
},
{ 
  "id": 8, 
  "type": "date",
  "label": "Date of birth",
  "group_id": 7 

},
{ "id": 9, 
  "type": "email", 
  "label": "Email",
  "group_id": 7 
}, 
{ 
  "id": 10, 
  "type": "phone", 
  "label": "Phone", 
  "group_id": 7 

}, 
{ 
  "id": 11, 
  "type": "color", 
  "label": "Color", 
  "value": "#ff9900", 
  "group_id": 7
},
{ 
  "id": 12, 
  "type": "number", 
  "label": "Age", 
  "value": 22, 
  "group_id": 7 
}, 
{ 
  "id": 13, 
  "type": "number", 
  "label": "Friends", 
  "value": 3, 
  "group_id": 7 

}, 
{ "id": 14,
  "type": "select_one", 
  "label": "Select One City", 
  "value": "karachi", 
  "choices": [
               "lahore", 
               "karachi", 
               "multan", 
               "faisalabad", 
               "pishawar", 
               "queta",
               "islamabad"
             ], 
  "group_id": 7 

}, 
{ 
  "id": 15, 
  "type": "select_one", 
  "label": "Select One Fruit", 
  "value":"peach", 
  "choices": [
                "apple", 
                "banana", 
                "mango", 
                "peach", 
                "grapes", 
                "pine", 
                "strawberry"], 
  "group_id": 7 } 
  ]

推荐阅读