Обновите форму 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();