如何在跟随Json的基础上创建动态形式？

Question

请告诉我如何在json下面使用map()，以及如何为这个json创建动态表单。我不知道如何使用这个json来创建动态自响应本机。

{
    "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
    }
    
}

Answer 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
    }
}