组件不能用作 JSX 组件。它的返回类型'元素 | undefined' 不是有效的 JSX 元素答案

【问题标题】：Component cannot be used as a JSX component. Its return type 'Element | undefined' is not a valid JSX element组件不能用作 JSX 组件。它的返回类型'元素 | undefined' 不是有效的 JSX 元素
【发布时间】：2022-01-06 15:03:02
【问题描述】：

我正在尝试在另一个组件中渲染我的 <Reports/> 组件，但我收到了这个错误：

“报告”不能用作 JSX 组件。它的返回类型'元素 | undefined' 不是有效的 JSX 元素。

My Reports 组件的意图是根据父组件的状态返回一个组件。这是我的报告组件的外观：

import React from "react";
import { GroupedOrder } from "../../components/Relatorios/PedidoAgrupado";
import { SalesOrder } from "../../components/Relatorios/PedidoDeVenda";
import { OrderSumarry } from "../../components/Relatorios/PedidoResumido";
import { Management } from "../../components/Relatorios/SaidaEstoque";

interface Props {
  typeOfReport: string;
  data: any;
}

export const Reports = ({ typeOfReport, data }: Props) => {
  switch (typeOfReport) {
    case "Sales Order":
      return <SalesOrder data={data} />;
    case "Report":
      return <SalesOrder data={data} />;
    case "Grouped Order":
      return <GroupedOrder data={data} />;
    case "Management":
      return <Management data={data} />;
    case "Order Summary":
      return <OrderSummary data={data} />;
  }
};

【问题讨论】：

它需要在你的 switch case 中有一个默认值。
成功了！请提交答案，以便我接受

标签： reactjs typescript

【解决方案1】：

它需要在你的 switch case 中有一个默认值。如果没有匹配项，则为undefined。

import React from "react";
import { GroupedOrder } from "../../components/Relatorios/PedidoAgrupado";
import { SalesOrder } from "../../components/Relatorios/PedidoDeVenda";
import { OrderSumarry } from "../../components/Relatorios/PedidoResumido";
import { Management } from "../../components/Relatorios/SaidaEstoque";

interface Props {
  typeOfReport: string;
  data: any;
}

export const Reports = ({ typeOfReport, data }: Props) => {
  switch (typeOfReport) {
    case "Sales Order":
      return <SalesOrder data={data} />;
    case "Report":
      return <SalesOrder data={data} />;
    case "Grouped Order":
      return <GroupedOrder data={data} />;
    case "Management":
      return <Management data={data} />;
    case "Order Summary":
      return <OrderSummary data={data} />;
    default:
      return <SalesOrder data={data} />;
  }
};

【讨论】：