如何在react-jsonschema-form中让schema依赖生成的表单字段展示在同一行

以下两种方案都适配你当前使用的Bootstrap样式库，且不会影响你已实现的下拉选择切换字段的依赖逻辑：

方案1（更推荐）：无需引入额外布局库，直接通过uiSchema配置类名实现 #

利用Bootstrap自带的栅格系统，给字段容器和子字段配置自定义类名即可实现同行展示，对应uiSchema写法如下：

{
  "definitions": {
    "stringList": {
      "ui:options": {
        "classNames": "row align-items-center g-3"
      },
      "Select Operator": {
        "ui:options": {
          "classNames": "col-auto"
        }
      },
      "value": {
        "ui:options": {
          "classNames": "col"
        }
      }
    },
    "range": {
      "ui:options": {
        "classNames": "row align-items-center g-3"
      },
      "Select Operator": {
        "ui:options": {
          "classNames": "col-auto"
        }
      },
      "from": {
        "ui:options": {
          "classNames": "col"
        }
      },
      "to": {
        "ui:options": {
          "classNames": "col"
        }
      }
    }
  }
}

如果你使用的是Bootstrap 4版本，把配置里的g-3替换为mx-n2，同时给所有子字段的classNames加上px-2即可适配间距。

方案2：使用布局库实现 #

如果你要使用对应的布局库，按以下步骤配置即可：

1. 先修改你的JSON Schema，给stringList和range两个结构新增布局配置：

// stringList 新增配置
"stringList": {
  "title": "",
  "type": "object",
  "layout": {
    "groups": [
      {"keys": ["Select Operator", "value"], "columns": 2}
    ]
  },
  // 其余原有属性保持不变
}

// range 新增配置
"range": {
  "title": "",
  "type": "object",
  "layout": {
    "groups": [
      {"keys": ["Select Operator", "from", "to"], "columns": 3}
    ]
  },
  // 其余原有属性保持不变
}

2. 编写对应uiSchema开启布局功能：

{
  "ui:layout": true,
  "definitions": {
    "stringList": {
      "ui:layout": true
    },
    "range": {
      "ui:layout": true
    }
  }
}

配置完成后在表单组件中引入布局库对应的字段模板，即可生成Bootstrap适配的同行布局。

内容的提问来源于stack exchange，提问作者user1692342