React中JSX标签children属性报错：期望单个ReactNode子元素求助

问题根源 #

你遇到的TypeScript错误，核心原因是Typography组件的children属性被类型定义限制为单个ReactNode，但你传入了两个独立的子节点：

• 第一个是字符串字面量 "Your previous score was: "
• 第二个是表达式结果 {props.lastScore}

在JSX语法中，这种写法会被解析为两个并列的子元素，而如果组件的children类型被标注为「单个ReactNode」而非「ReactNode数组」，TypeScript就会抛出这个类型不匹配的错误。

正确解决方式 #

方法1：合并子节点为单个字符串（推荐） #

用模板字符串把文本和变量拼接成一个整体，这样children就变成单个字符串节点：

{props.showHistory && <Typography variant="body1">
  {`Your previous score was: ${props.lastScore}`}
</Typography>}

方法2：用Fragment包裹多个子节点 #

通过<>（简写Fragment）把多个子节点打包成一个整体，符合单个ReactNode的类型要求：

{props.showHistory && <Typography variant="body1">
  <>Your previous score was: {props.lastScore}</>
</Typography>}

方法3：调整组件的类型定义（仅适用于自定义组件） #

如果你是自己封装的Typography组件，可以修改它的类型定义，把children从React.ReactNode改为React.ReactNode | React.ReactNode[]，允许传入多个子节点：

interface TypographyProps {
  variant: string;
  children: React.ReactNode | React.ReactNode[];
}

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