reactjs - 使用 React 和 JSONSchema 表单时出现“未找到适用的渲染器”

问题描述

我正在学习 React 并决定查看 JSON 表单（https://jsonforms.io/docs/tutorial）。

我可以从https://github.com/eclipsesource/jsonforms-react-seed运行种子应用程序，并且我还尝试将所有与表单相关的东西移动到它自己的组件中，而不是将它们全部放在 index.js 中. 这在种子应用程序中效果很好。

然后我决定尝试在种子应用程序中从操场架构（https://mozilla-services.github.io/react-jsonschema-form/）设置演示表单，以确保我知道如何更改形式。

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

我复制了 Playground 中的三个输入（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;

index.js 看起来像这样：

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;

标签： reactjs

<JsonForms schema={schema} uischema={Generate.uiSchema(schema)} data={data} renderers={materialRenderers} />

reactjs - 使用 React 和 JSONSchema 表单时出现“未找到适用的渲染器”

问题描述

解决方案

推荐阅读