reactjs - 如何以 React json 形式制作模式依赖项以显示在一行中

Question

我正在使用 react json 模式表单（https://react-jsonschema-form.readthedocs.io/）来创建通过模式呈现的表单。我正在尝试生成一个模式依赖项，其中基于下拉列表的选择生成不同类型的表单字段。

我以这种形式创建了 json 模式：

{
            "title": "Query Builder",
            "type": "object",
            "properties": {
                "SelectCriteria": {
                    "title": "",
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/criteria"
                    }
                }
            },
            "definitions": {
                "nestedGroup": {
                    "title": "Nested Group",
                    "type": "object",
                    "properties": {
                        "SelectCriteria": {
                            "title": "",
                            "type": "array",
                            "items": {
                                "$ref": "#/definitions/criteria"
                            },
                            "maxItems": 1
                        }
                    }
                },
                "stringList": {
                    "title": "",
                    "type": "object",
                    "properties": {
                        "Select Operator": {
                            "type": "string",
                            "enum": ["Equals", "Contains"]
                        },
                        "value": {
                            "type": "string"
                        }
                    },
                    "required": ["Select Operator", "value"]
                },
                "range": {
                    "title": "",
                    "type": "object",
                    "properties": {
                        "Select Operator": {
                            "type": "string",
                            "enum": ["Equals", "Contains"]
                        },
                        "from": {
                            "type": "number"
                        },
                        "to": {
                            "type": "number"
                        }
                    },
                    "required": ["Select Operator"]
                },
                "criteria": {
                    "title": "",
                    "type": "object",
                    "properties": {
                        "Select Criteria": {
                            "type": "string",
                            "enum": ["Customer reviews", "Popularity Score", "nestedGroup"]
                        },
                        "isNot": {
                            "type": "boolean"
                        }
                    },
                    "required": ["Select Criteria"],
                    "dependencies": {
                        "Select Criteria": {
                            "oneOf": [
                                {
                                    "properties": {
                                        "Select Criteria": {
                                            "enum": ["nestedGroup"]
                                        },
                                        "items": {
                                            "$ref": "#/definitions/nestedGroup"
                                        }
                                    }
                                },
                                {
                                    "properties": {
                                        "Select Criteria": {
                                            "enum": ["Customer reviews"]
                                        },
                                        "items": {
                                            "$ref": "#/definitions/stringList"
                                        }
                                    }
                                },
                                {
                                    "properties": {
                                        "Select Criteria": {
                                            "enum": ["Popularity Score"]
                                        },
                                        "items": {
                                            "$ref": "#/definitions/range"
                                        }
                                    }
                                }
                            ]
                        }
                    }
                }
            }
        }

但是，通过在 json 模式游乐场 ( https://rjsf-team.github.io/react-jsonschema-form/ )中对此进行测试可以看出，它会在彼此下方生成 Select 运算符和相应的值框。有没有办法让所有东西都排成一行？

我研究过使用这个https://github.com/audibene-labs/react-jsonschema-form-layout来布局不同的表单元素，但我无法弄清楚 uiSchema 应该是什么样子。有什么建议么？我使用引导程序作为我的样式库。