我正在使用带有React、Material UI和Typescript的react-jsonschema-form包。我正在使用名为MuiForm 5的Material UI主题表单。我在使用此表单时遇到编译错误,无法解决此问题。我对所有这些技术都是新手。感谢您的帮助。
在这里给出我的代码剪切器,包依赖关系和错误。
我遵循该网站www.example.com的文档表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;
包.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 }) =>
型
2条答案
按热度按时间hts6caw31#
//@ts-ignore
处理错误对我很有效。我认为这是因为@rjsf/material-ui仍然使用基于类的组件而不是functiona组件zpgglvta2#
你需要安装@rjsf/utils
包.json
并将验证器传递给表单