将react jsonschema表单与typescript项目中的材料一起使用时出错

Question

我正在使用带有react、Material UI和Typescript的react jsonschema表单包。我正在使用名为MuiForm5的材质UI主题表单。使用此表单时出现编译错误，无法解决此问题。我对所有这些技术都是新手。感谢您的帮助。

这里给出了我的代码剪切器、包依赖关系和错误。

我正在遵循此网站的文档表单https://react-jsonschema-form.readthedocs.io/en/latest/#installation和材料UI特定文档https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui

应用程序：

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 }) =>

Answer 1

//@ts-ignore如果出现错误，对我来说是有效的。我认为这是可行的，因为@rjsf/material ui仍然使用基于类的组件，而不是函数的组件

Answer 2

您需要安装@rjsf/utils

package.json

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

并将验证器传递给表单

import validator from '@rjsf/validator-ajv6';
.....
<Form
....
validator={validator}
... 
/>