使用React和JSONSchema表单时获取“未找到适用的渲染器”

我正在学习React并决定签出JSON表单( https://jsonforms.io/docs/tutorial

我可以从中获取种子应用程序 https://github.com/eclipsesource/jsonforms-react-seed

然后我决定尝试从游乐场模式中设置演示表单( https://mozilla-services.github.io/react-jsonschema-form/ )在seed应用程序中,只是为了确保我知道如何更改表单。

这就是车轮脱落的地方。我得到的不是表单,而是“找不到适用的渲染器”

我在操场上复制了三个输入(schema、UISchema和formData)。下面是来自单独组件的代码,模式、uischema和数据直接取自jsonschema提供的数据:

import { JsonForms } from '@jsonforms/react';
import React from 'react';

import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';

import { Actions, jsonformsReducer } from '@jsonforms/core';
import { materialFields, materialRenderers } from '@jsonforms/material-renderers';

 const data = {
    firstName: "Chuck",
    lastName: "Norris",
    age: 75,
    bio: "Roundhouse kicking asses since 1940",
    password: "noneed"
};

const schema = {
    "title": "A registration form",
    "description": "A simple form example.",
    "type": "object",
    "required": [
      "firstName",
      "lastName"
    ],
    "properties": {
      "firstName": {
        "type": "string",
        "title": "First name"
      },
      "lastName": {
        "type": "string",
        "title": "Last name"
      },
      "age": {
        "type": "integer",
        "title": "Age"
      },
      "bio": {
        "type": "string",
        "title": "Bio"
      },
      "password": {
        "type": "string",
        "title": "Password",
        "minLength": 3
      },
      "telephone": {
        "type": "string",
        "title": "Telephone",
        "minLength": 10
      }
    }
  };

const uischema = {
    "firstName": {
      "ui:autofocus": true,
      "ui:emptyValue": ""
    },
    "lastName": {
      "ui:autofocus": true,
      "ui:emptyValue": ""
    },
    "age": {
      "ui:widget": "updown",
      "ui:title": "Age of person",
      "ui:description": "(earthian year)"
    },
    "bio": {
      "ui:widget": "textarea"
    },
    "password": {
      "ui:widget": "password",
      "ui:help": "Hint: Make it strong!"
    },
    "telephone": {
      "ui:options": {
        "inputType": "tel"
      }
    }
  };

const store = createStore(
    combineReducers({ jsonforms: jsonformsReducer() }),
    {
      jsonforms: {
        fields: materialFields,
        renderers: materialRenderers
      },
    }
  );

store.dispatch(Actions.init(data, schema, uischema));

function SampleForm() {
    return (
    <div>
        <Provider store={store}>
            <JsonForms />
        </Provider>
    </div>);
}

export default SampleForm;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

最后,应用程序本身app.js如下所示:

import React from 'react';
import './App.css';
import SampleForm from './sampleform';

const styles = {
  container: {
    padding: '1em'
  },
  title: {
    textAlign: 'center',
    padding: '0.25em'
  },
  dataContent: {
    display: 'flex',
    justifyContent: 'center',
    borderRadius: '0.25em',
    backgroundColor: '#cecece',
  },
  demoform: {
    margin: 'auto'
  }
};


const App = () => (
  <div>

    <SampleForm/>

  </div>
);

export default App;