如何解决‘Alert无法作为JSX组件使用，返回类型void无效’错误

问题核心 #

你遇到的错误和依赖包版本无关，本质是Alert组件没有返回任何有效的JSX元素——当前组件函数执行后默认返回void，不符合React组件必须返回JSX元素（或null）的要求。

现有代码 #

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

修复方案 #

给Alert组件添加返回语句，返回包含传入props内容的JSX结构，示例如下：

type Props = {
  type?: string;
  heading: string;
  children: React.ReactNode;
  closable?: boolean;
  onClose?: () => void;
};

export function Alert({
  type = "information",
  heading,
  children,
  closable,
  onClose,
}: Props) {
  // 可根据type定义不同样式类名
  const alertClassName = `alert alert-${type}`;

  return (
    <div className={alertClassName}>
      <h4>{heading}</h4>
      <div>{children}</div>
      {/* 可选的关闭按钮逻辑 */}
      {closable && onClose && (
        <button onClick={onClose} className="alert-close-btn">×</button>
      )}
    </div>
  );
}

关键提示 #

• React组件函数必须返回JSX元素、null，严格模式下也可返回undefined（不推荐）
• 若组件确实不需要渲染内容，可显式返回null，而非留空函数体

内容的提问来源于stack exchange，提问作者Amii Miron