如何根据 Json 在 React 中创建动态表单？答案

【问题标题】：How to Create Dynamic Form in React from following Json?如何根据 Json 在 React 中创建动态表单？
【发布时间】：2021-06-10 06:15:17
【问题描述】：

请给我一个想法，如何在下面的 json 中使用 map() 以及如何为这个 json 创建动态表单。我不知道如何使用这个 json 在 react-native 中创建动态

{
    "Location": {
        "field_count": 1,
        "field_name": [
            "location"
        ],
        "field_type": "TextField",
        "context_type": "Location",
        "field_unit": null,
        "is_compulsory": true
    },
    "Maximum Tie Bar": {
        "field_count": 2,
        "field_name": [
            "max_tie_bar_1",
            "max_tie_bar_2"
        ],
        "field_type": "TextField",
        "context_type": "Decimal",
        "field_unit": "mm x mm",
        "is_compulsory": true
    },
    "Type": {
        "field_count": 1,
        "field_name": [
            "type"
        ],
        "field_type": "Dropdown",
        "field_values": [
            "Injection Mold",
            "Gas Injection Mold",
            "PVC Mold",
            "Overmold/Insert Mold",
            "Transfer Mold",
            "Compression Mold",
            "2k Mold",
            "Stack Mold"
        ],
        "is_compulsory": true
    }
    
}

【问题讨论】：

你尝试了吗？是什么阻止您使用 switch case 或类似的东西制作 .map？

标签： javascript reactjs react-native react-hooks

【解决方案1】：

你可以这样做：首先循环你的 JSON 对象

Object.keys(JSON_OBJECT).map(function(item) {
  renderItemsFromJson(JSON_OBJECT[item])
});

相应地有条件地呈现您的项目

renderItemsFromJson = (item) => {
    switch(item.field_type){
        case 'TextField':
            return '<TextInput>[Inside code]</TextInput>'
        case 'Dropdown':
           return '<YourDropDownComponent>[Insidecode]</YourDropDownComponent>'
        //Likewise
    }
}

【讨论】：