Обновите форму response-jsonschema до bs4

Я экспериментирую с обновлением моего приложения React от использования реактив-jsonschema-form до реактив-jsonschema-form-bs4 и надеялся, что для этого потребуется только простое обновление загрузочной версии. Приложение загружается и работает нормально, но теперь стили не отображаются так, как было. Например, на кнопках больше не отображаются значки, поэтому сложно сказать, что они делают.

Итак, мой вопрос: должно ли это быть простым изменением версии загрузчика, и все должно работать как прежде, или мне нужно знать различия между версиями загрузчика и делать дальнейшие обновления моей программы /UIScheme и т. Д.

Вот моя тестовая программа React:

import React, { Component }  from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
//import Form from "react-jsonschema-form";
import Form from "react-jsonschema-form-bs4";
// import 'bootstrap/dist/css/bootstrap.min.css';

const schema= {
    "definitions": {
      "Color": {
        "title": "Color",
        "type": "string",
        "anyOf": [
          {
            "type": "string",
            "enum": [
              "#ff0000"
            ],
            "title": "Red"
          },
          {
            "type": "string",
            "enum": [
              "#00ff00"
            ],
            "title": "Green"
          },
          {
            "type": "string",
            "enum": [
              "#0000ff"
            ],
            "title": "Blue"
          }
        ]
      }
    },
    "title": "Image editor",
    "type": "object",
    "required": [
      "currentColor",
      "colorMask",
      "blendMode"
    ],
    "properties": {
      "currentColor": {
        "$ref": "#/definitions/Color",
        "title": "Brush color"
      },
      "colorMask": {
        "type": "array",
        "uniqueItems": true,
        "items": {
          "$ref": "#/definitions/Color"
        },
        "title": "Color mask"
      },
      "colorPalette": {
        "type": "array",
        "title": "Color palette",
        "items": {
          "$ref": "#/definitions/Color"
        }
      },
      "blendMode": {
        "title": "Blend mode",
        "type": "string",
        "enum": [
          "screen",
          "multiply",
          "overlay"
        ],
        "enumNames": [
          "Screen",
          "Multiply",
          "Overlay"
        ]
      }
    }
  },
  UISchema={
    "blendMode": {
      "ui:enumDisabled": [
        "multiply"
      ]
    }
  },
  formData= {
    "currentColor": "#ff0000",
    "colorMask": [
      "#00ff00"
    ],
    "colorPalette": [
      "#ff0000",
      "#ff0000",
      "#0000ff"
    ],
    "blendMode": "screen"
  }

class App extends Component {
    render() {       
      return(
      <div style={{width: '90%', margin: '20px'}}>
      <Form 
                UISchema={UISchema}
                schema={schema}
                formData={formData}
                onSubmit={console.log({formData})}

              />

      </div>


      );
    }
  }

ReactDOM.render(<App/>, document.getElementById('root'));

serviceWorker.unregister();

0 ответов

Другие вопросы по тегам