1

我正在尝试将我的 React 应用程序从使用 react-jsonschema-form 更新为 react-jsonschema-form-b​​s4，并希望它只需要简单地更新引导版本。该应用程序加载并运行正常，但现在样式未按原样显示。例如，按钮不再显示图标，因此很难分辨它们的作用。

所以，我的问题是：更改引导程序版本是否应该是一件简单的事情，并且一切都应该像以前一样工作，还是我需要知道引导程序版本之间的差异并对我的程序/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();
4

0 回答 0