[英]Component cannot be used as a JSX component. Its return type 'void' is not a valid JSX element (React Hooks)
I have a component that is a form, but when I want to use it I get an error.我有一个表单组件,但是当我想使用它时出现错误。 I don't see where the error is, it's a simple form.
我看不出错误在哪里,这是一个简单的形式。 Maybe the error is in the props?
也许错误在道具中?
This is the component, the form:这是组件,形式:
interface FormTemplateProps {
handleOnSubmit: (event: React.FormEvent<HTMLFormElement>) => void,
handleInputChange: (event: React.FormEvent<HTMLInputElement>) => void,
valueTitle: string,
valueAuthor: string,
valueContent: string,
error: string
}
const FormTemplate = (props: FormTemplateProps) => {
<div className="containerHomepage">
<form className="formulari" onSubmit={props.handleOnSubmit}>
<div className="containerBreadCrumb">
<ul className="breadCrumb">
<li>Posts</li>
</ul>
</div>
<div className="containerTitleButton">
<input
className=""
type="text"
placeholder='Post title'
name="title"
value={props.valueTitle}
onChange={props.handleInputChange}
></input>
<button
className="button"
type="submit"
>Save</button>
</div>
<div className="containerEdit">
<input
className="editAuthor"
type="text"
placeholder='Author'
name="author"
value={props.valueAuthor}
onChange={props.handleInputChange}
></input>
<input
className="editContent"
type="textarea"
placeholder='Content'
name="content"
value={props.valueContent}
onChange={props.handleInputChange}
></input>
{props.error !== "" ?
< ErrorMessage
message={props.error}
/>
: null
}
</div>
</form>
</div>
};
And this is the other component, where I want to call that form:这是另一个组件,我想在其中调用该表单:
const handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
console.log((e.target as HTMLInputElement).value)
setPost({
...post,
[(e.target as HTMLInputElement).name]: (e.target as HTMLInputElement).value
})
};
let navigate = useNavigate();
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!post.title || !post.author || !post.content) {
setError("¡No dejes campos vacíos!")
} else {
editPost(post);
navigate("/");
}
}
return (
<div className="containerHomepage">
< FormTemplate
handleOnSubmit={handleOnSubmit}
handleInputChange={handleInputChange}
valueTitle={post?.title}
valueAuthor={post?.author}
valueContent={post?.content}
error={error}
/>
</div>
);
};
// ========================================
export default Edit;
The message error is:消息错误是:
'FormTemplate' cannot be used as a JSX component. “FormTemplate”不能用作 JSX 组件。 Its return type 'void' is not a valid JSX element.ts(2786)
它的返回类型 'void' 不是有效的 JSX element.ts(2786)
Answer thanks to David Scholz: adding a return just before the first div of the form has fixed the problem!感谢 David Scholz 的回答:在表单的第一个 div 之前添加一个 return 已经解决了这个问题!
const FormTemplate = (props: FormTemplateProps) => {
return (
<div className="containerHomepage">
<form className="formulari" onSubmit={props.handleOnSubmit}>
<div className="containerBreadCrumb">
<ul className="breadCrumb">
<li>Posts</li>
</ul>
</div>
<div className="containerTitleButton">
<input
className=""
type="text"
placeholder='Post title'
name="title"
value={props.valueTitle}
onChange={props.handleInputChange}
></input>
<button
className="button"
type="submit"
>Save</button>
</div>
<div className="containerEdit">
<input
className="editAuthor"
type="text"
placeholder='Author'
name="author"
value={props.valueAuthor}
onChange={props.handleInputChange}
></input>
<input
className="editContent"
type="textarea"
placeholder='Content'
name="content"
value={props.valueContent}
onChange={props.handleInputChange}
></input>
{props.error !== "" ?
<ErrorMessage
message={props.error}
/>
: null
}
</div>
</form>
</div>
)
};
export default FormTemplate;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.