打字稿：其返回类型"未知"不是有效的 JSX 元素

Question

我正在创建一个简单的应用程序，它可以呈现课程列表和有关课程的一些详细信息。

课程详细信息分为"标题"、"内容"one_answers"总计"。

在Content部分中，有一个子组件：Part，然而Typescript抱怨JSX元素是"；未知"；我不知道为什么。

有人能理解这一点吗？

App.js

import Header from './components/Header'
import Content from './components/Content'
import Total from './components/Total'
import { CoursePart } from './types'
const App = () => {
const courseName = "Half Stack application development";
const courseParts: CoursePart[] = [
{
name: "Fundamentals",
exerciseCount: 10,
description: "This is the easy course part",
type: "normal"
},
{
name: "Advanced",
exerciseCount: 7,
description: "This is the hard course part",
type: "normal"
},
{
name: "Using props to pass data",
exerciseCount: 7,
groupProjectCount: 3,
type: "groupProject"
},
{
name: "Deeper type usage",
exerciseCount: 14,
exerciseSubmissionLink: "https://fake-exercise-submit.made-up-url.dev",
type: "submission"
}
]
return (
<div>
<Header courseName={courseName} />
<Content courseParts={courseParts} />
<Total courseParts={courseParts} />
</div>
);
};
export default App;

内容组件：

import { interfacePart } from '../types'
import Part from './Part'
const Content = ({ courseParts }: {courseParts: interfacePart }): unknown => {
return (

<div>
<Part courseParts={courseParts} />
</div>
)
}
export default Content

零部件：

import { interfacePart } from '../types'
// eslint-disable-next-line react/prop-types
const Part = ({ courseParts }: {courseParts: interfacePart })  => {
return (
courseParts.forEach(part => {
switch (part.name) {
case "Fundamentals":
return (
<div>
{part.name}
</div>
)

case "Advanced":
return (
<div>
{part.name}
</div>
)
case "Using props to pass data":
return (
<div>
{part.name}
</div>
)

case "Deeper type usage":
return (
<div>
{part.name}
</div>
)
default:
break

}
})
)
}
export default Part

types.tsx

export interface Title {
courseName: string
}
export interface CoursePartBase {
name: string;
exerciseCount: number;
type: string;
}
export interface CoursePartBaseDescription extends CoursePartBase {
description?: string;
}
export interface CoursePartOne extends CoursePartBaseDescription {
name: "Fundamentals";
}
export interface CoursePartTwo extends CoursePartBase {
name: "Using props to pass data";
groupProjectCount: number;
}
export interface CoursePartThree extends CoursePartBaseDescription {
name: "Deeper type usage";
description?: string;
exerciseSubmissionLink: string;
}
export interface CoursePartFour extends CoursePartBaseDescription {
name: "Advanced";
}
export interface CourseSpecialPart extends CoursePartBaseDescription {
name: "Backend development";
requirements: Array<string>;
}
export type CoursePart = CoursePartOne | CoursePartTwo | CoursePartThree | CoursePartFour | CourseSpecialPart;
export interface interfacePart {
reduce(arg0: (carry: any, part: any) => any, arg1: number): import("react").ReactNode;
forEach(arg0: (part: any) => JSX.Element | undefined): unknown;
part?: CoursePart;
}

Answer 1

尝试用Fragment包装Part组件的内容，如下所示：

import { interfacePart } from '../types'
// eslint-disable-next-line react/prop-types
const Part = ({ courseParts }: {courseParts: interfacePart })  => {
return (
<>
courseParts.forEach(part => {
switch (part.name) {
case "Fundamentals":
return (
<div>
{part.name}
</div>
)

case "Advanced":
return (
<div>
{part.name}
</div>
)
case "Using props to pass data":
return (
<div>
{part.name}
</div>
)

case "Deeper type usage":
return (
<div>
{part.name}
</div>
)
default:
break

}
})
)
</>
}
export default Part

这里使用Fragment的原因是

React中的一种常见模式是组件返回多个元素。片段使您可以对子项列表进行分组，而无需添加DOM的额外节点。

https://reactjs.org/docs/fragments.html

Answer 2

Content组件的类型为unknown。类型未知是类型any的类型安全计数器部分。然而，unknown类型比any类型宽松得多。

要修复错误，请将内容组件的类型更改为以下类型：

const Content: React.FC<{courseParts: interfacePart }> = ({ courseParts }) => {
return (
// Your JSX code
)
}

其次，在默认情况下，编辑Parts组件以返回React片段，并用React片段包装forEach，从而将代码块解释为JSX:

import React from 'react';
import { interfacePart } from '../types'
const Part: React.FC<{courseParts: interfacePart }> = ({ courseParts })  => {
return (
<>
{
courseParts.forEach(part => {
switch (part.name) {
case "Fundamentals":
return (
<div>
{part.name}
</div>
)
case "Advanced":
return (
<div>
{part.name}
</div>
)
case "Using props to pass data":
return (
<div>
{part.name}
</div>
)
case "Deeper type usage":
return (
<div>
{part.name}
</div>
)
default:
return (<></>)
}
})
}
</>
)
}
export default Part

最后，更新interfacePart以返回一个JSX元素，而不是forEach循环的未知元素。

export interface interfacePart {
reduce(arg0: (carry: any, part: any) => any, arg1: number): import("react").ReactNode;
forEach(arg0: (part: any) => JSX.Element | undefined): JSX.Element;
part?: CoursePart;
}