react.js 基于 DRF HTTP OPTIONS 动态生成表单

Posted 2023-02-24

【中文标题】react.js 基于 DRF HTTP OPTIONS 动态生成表单

【英文标题】：react.js dynamically generated forms based on DRF HTTP OPTIONS

【发布时间】：2018-09-12 14:16:16

【问题描述】：

是否有任何基于 django-rest-framework OPTIONS 渲染表单的包？

我的意思是让表单像这样基于 smth 呈现：

    "name": "Spots Rating List",
    "description": "",
    "renders": [
        "application/json",
        "text/html"
    ],
    "parses": [
        "application/json",
        "application/x-www-form-urlencoded",
        "multipart/form-data"
    ],
    "actions": 
        "POST": 
            "pk": 
                "type": "integer",
                "required": false,
                "read_only": true,
                "label": "ID"
            ,
            "created_at": 
                "type": "datetime",
                "required": false,
                "read_only": true,
                "label": "Created at"
            ,
            "updated_at": 
                "type": "datetime",
                "required": false,
                "read_only": true,
                "label": "Updated at"
            ,
            "is_enabled": 
                "type": "choice",
                "required": false,
                "read_only": false,
                "label": "Is enabled",
                "choices": [
                    
                        "value": false,
                        "display_name": "Not allowed"
                    ,
                    
                        "value": true,
                        "display_name": "Allowed"
                    
                ]
            ,
            "friendly_rate": 
                "type": "choice",
                "required": true,
                "read_only": false,
                "label": "Friendly rate",
                "choices": [
                    
                        "value": 1,
                        "display_name": "terrible"
                    ,
                    
                        "value": 2,
                        "display_name": "poor"
                    ,
                    
                        "value": 3,
                        "display_name": "average"
                    ,
                    
                        "value": 4,
                        "display_name": "very good"
                    ,
                    
                        "value": 5,
                        "display_name": "excellent"
                    
                ]
            ,
            "opinion": 
                "type": "nested object",
                "required": false,
                "read_only": true,
                "label": "Opinion",
                "children": 
                    "pk": 
                        "type": "field",
                        "required": true,
                        "read_only": false,
                        "label": "Rating"
                    ,
                    "created_at": 
                        "type": "datetime",
                        "required": false,
                        "read_only": true,
                        "label": "Created at"
                    ,
                    "updated_at": 
                        "type": "datetime",
                        "required": false,
                        "read_only": true,
                        "label": "Updated at"
                    ,
                    "opinion_text": 
                        "type": "string",
                        "required": true,
                        "read_only": false,
                        "label": "Opinion text",
                        "max_length": 500
                    
                
            ,
            "tags": 
                "type": "field",
                "required": false,
                "read_only": false,
                "label": "Tags"
            ,
            "user": 
                "type": "field",
                "required": false,
                "read_only": true,
                "label": "User"
            
        
    

无法在网络上提供任何参考。大多数都是硬编码的组件，对我来说是丑陋的，可怜的...... https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_React_building_a_React_form

或者如果至少可以获得表单的生成组件代码也可以。

【问题讨论】：

嗨！您找到解决方案了吗？

【参考方案1】：

我知道这不是完整的答案，但值得注意的是DRF Schema Adapter 是旨在为前端框架导出此 DRF 元数据功能的项目。目前，它仅适用于 Ember 和 Angular，但似乎为 React 编写自己的适配器并不难，因为它提供了 MobxAxiosAdapter 与 React 一起使用。

即使你没有资源来开发这样的东西，你也可以收藏这个库并等到 React 中的表单得到支持。