[英]cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786)
[英]Component cannot be used as a JSX component. Its return type 'void' is not a valid JSX element (React Hooks)
我有一个表单组件,但是当我想使用它时出现错误。 我看不出错误在哪里,这是一个简单的形式。 也许错误在道具中?
这是组件,形式:
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>
};
这是另一个组件,我想在其中调用该表单:
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;
消息错误是:
“FormTemplate”不能用作 JSX 组件。 它的返回类型 'void' 不是有效的 JSX element.ts(2786)
感谢 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.