Как заставить объекты схемы типа массива появляться один в ряд? реагируют-jsonschema-форма

Question

Я использую реагирующую jsonschema-форму для создания формы. Отдельные компоненты отображаются нормально, но компоненты массива идут подряд. Как сделать так, чтобы они отображались одним объектом массива в строке, чтобы каждый раз, когда я нажимал кнопку «Добавить», новый объект массива отображался в новой строке. Код выглядит следующим образом:

    const schema = {
  type: "object",
  properties: {
    Name: { type: "string", title: "Name", default: "A new Task" },
    Title: { type: "object", properties: { First: { type: "string" }, Second: { type: "string" } } },
    XYZ: { type: "array", items: { type: "object", properties: { Third: { type: "string" }, Forth: { type: "boolean", enum: [true, false], enumNames: ["True", "False"] } } } }
  }
}

const uiSchema = {
  "ui:order": ["Name", "Title", "Done"],
  Name: { "ui:widget": "textarea" },
  Title: { First: { "ui:widget": "textarea" }, Second: { "ui:widget": "textarea" } },
  XYZ: { items: { Third: { "ui:widget": "textarea" }, Forth: { "ui:widget": "radio", "ui:options": { inline: true } } }, "ui:options": { orderable: false, removable: true, inline: false } }
}

Код формы выглядит следующим образом:

<Form schema={schema}
              // formData = {defaultData}
              uiSchema={uiSchema}
              onChange={log("changed")}
              onSubmit={SubmitRoutine}
              onError={ErrorRoutine}
            />

Как показано на следующем рисунке, объекты массива XYZ имеют фиксированную ширину и отображаются рядом друг с другом. Я хочу их полную ширину и каждый объект в новом ряду. Я использую React и Bootstrap4 Кроме того, мне нужно добавить первый объект, нажав кнопку «Плюс». Я хочу, чтобы первый объект появился сам. Пожалуйста, дайте мне знать, как я могу это исправить. Спасибо

Answer 1

Это может быть достигнуто с помощью чистого CSS , при условии, что нет необходимости отражать порядок в модели:

/* class of a wrapping element */
.array-item-list {
    display: flex;
    /* column, column-reverse, row, row-reverse */
    flex-direction: column-reverse;
}

Answer 2

Оформить заказ это библиотека. Это позволяет выложить вашу форму с помощью бутстрап-сетки.