英文:
How to solve this error: "Alert" cannot be used as a jsx component. Its return type 'void' is not a valid JSX element
问题
App.tsx
import { Alert } from "./Alert";
import "./styles.css";
function App() {
return (
<>
<div className="App">
<Alert heading="Success">Everything is really good!</Alert>
</div>
</>
);
}
export default App;
Alert.tsx
type Props = {
type?: string;
heading: string;
children: React.ReactNode;
closable?: boolean;
onClose?: () => void;
};
export function Alert({
type = "information",
heading,
children,
closable,
onClose,
}: Props) {}
Error: "Alert" 无法用作 JSX 组件。其返回类型 'void' 不是有效的 JSX 元素。
英文:
App.tsx
import { Alert } from "./Alert";
import "./styles.css";
function App() {
return (
<>
<div className="App">
<Alert heading="Success">Everything is really good!</Alert>
</div>
</>
);
}
export default App;
Alert.tsx
type Props = {
type?: string;
heading: string;
children: React.ReactNode;
closable?: boolean;
onClose?: () => void;
};
export function Alert({
type = "information",
heading,
children,
closable,
onClose,
}: Props) {}
I tried to update all packages nothing helps.
Error: ""Alert" cannot be used as a jsx component. Its return type 'void' is not a valid JSX element"
答案1
得分: 1
没有在那里返回任何JSX元素，所以导致了问题。
<br />
在Alert.tsx中尝试这样做：
type Props = {
type?: string;
heading: string;
children: React.ReactNode;
closable?: boolean;
onClose?: () => void;
};
export function Alert({
type = "information",
heading,
children,
closable,
onClose
}: Props) {
return <div>{children}</div>;
}
英文:
You didn't return any JSX Element there so it caused the issue.
<br />
Try this in Alert.tsx:
type Props = {
type?: string;
heading: string;
children: React.ReactNode;
closable?: boolean;
onClose?: () => void;
};
export function Alert({
type = "information",
heading,
children,
closable,
onClose
}: Props) {
return <div>{children}</div>;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论