在打字稿项目中将 react-jsonschema-form 与材料一起使用时出错答案

【问题标题】：Error while using react-jsonschema-form with material in typescript project在打字稿项目中将 react-jsonschema-form 与材料一起使用时出错
【发布时间】：2022-12-16 14:30:48
【问题描述】：

我正在将 react-jsonschema-form 包与 React、Material UI 和 Typescript 一起使用。我正在使用名为 MuiForm5 的 Material UI 主题表单。使用此表单时出现编译错误，我无法解决此问题。我对所有这些技术都不熟悉。任何帮助表示赞赏。

在这里提供我的代码片段、包依赖项和错误。

我正在关注此站点https://react-jsonschema-form.readthedocs.io/en/latest/#installation 的文档以及来自此处的材料 UI 特定文档 https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui

应用程序.tsx：

import React from "react";
import "./App.css";
import { MuiForm5 as Form } from "@rjsf/material-ui";
import { JSONSchema7 } from "json-schema";

const schema: JSONSchema7 = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: { type: "string", title: "Title", default: "A new task" },
    done: { type: "boolean", title: "Done?", default: false },
  },
};

function App() {
  return (
    <div className='App'>
      <Form
        schema={schema}
        onChange={({ formData }) =>
          console.log("change", JSON.stringify(formData))
        }
        onSubmit={({ formData }) =>
          console.log("submit", JSON.stringify(formData))
        }
        onError={({ errors }) => console.log("error", JSON.stringify(errors))}
      />
    </div>
  );
}

export default App;

package.json 中的依赖：

{
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.1",
    "@mui/material": "^5.6.1",
    "@rjsf/core": "^4.1.1",
    "@rjsf/material-ui": "^4.1.1",
    "@types/react": "^17.0.44",
    "@types/react-dom": "^17.0.15",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.3"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@types/react-jsonschema-form": "^1.7.8"
  }
}

编译错误：

ERROR in src/App.tsx:19:8
TS2786: 'Form' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<FormProps<any>, any, any> | null' is not a valid JSX element.
    Type 'Component<FormProps<any>, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<FormProps<any>, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
    17 |   return (
    18 |     <div className='App'>
  > 19 |       <Form
       |        ^^^^
    20 |         schema={schema}
    21 |         uiSchema={{}}
    22 |         onChange={({ formData }) =>

【问题讨论】：

同样在这里，不使用材料 ui 。我正在使用核心形式
你能解决这个问题吗？

标签： reactjs typescript material-ui react-jsonschema-forms

【解决方案1】：

//@ts-ignore 错误对我有用。我认为这是可行的，因为@rjsf/material-ui 仍然使用基于类的组件而不是功能组件

【讨论】：

【解决方案2】：

你需要安装@rjsf/utils

包.json

{
....    
"dependencies": {
.....
"@rjsf/utils": "^5.0.0-beta.6",
...

}
}

并将验证器传递给表单

import validator from '@rjsf/validator-ajv6';

.....

<Form
 ....
 validator={validator}
... 
/>

【讨论】：

您的输入对 @rjsf@5 有效，而不是 @rjsf@4 问题所在。