React中Button无法作为JSX组件使用的TS报错排查

云上老周

2026-6-22

问题

我是React新手，此前代码运行正常，现在代码出现报错：

src/components/ResponseLengthButtonGroup/ResponseLengthButtonGroup.tsx:22:18 - error TS2786: 'Button' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

22                 <Button id="Thorough" className={`${defaultValue == 3072? styles.buttonrightactive : styles.buttonright ?? ""}`} size="sm" value={3072} bsPrefix='ia'>{"Thorough"}</Button>
                    ~~~~~~

报错出现在ResponseLengthButtonGroup组件中，组件代码如下：

import { Button, ButtonGroup } from "react-bootstrap";
import { Label } from "@fluentui/react";

import styles from "./ResponseLengthButtonGroup.module.css";

interface Props {
    className?: string;
    onClick: (_ev: any) => void;
    defaultValue?: number;
}

export const ResponseLengthButtonGroup = ({ className, onClick, defaultValue }: Props) => {
    return (
        <div className={`${styles.container} ${className ?? ""}`}>
            <Label>Response length:</Label>
            <ButtonGroup className={`${styles.buttongroup ?? ""}`} onClick={onClick}>
                <Button id="Succinct" className={`${defaultValue == 1024? styles.buttonleftactive : styles.buttonleft ?? ""}`} size="sm" value={1024} bsPrefix='ia'>{"Succinct"}</Button>
                <Button id="Standard" className={`${defaultValue == 2048? styles.buttonmiddleactive : styles.buttonmiddle ?? ""}`} size="sm" value={2048} bsPrefix='ia'>{"Standard"}</Button>
                <Button id="Thorough" className={`${defaultValue == 3072? styles.buttonrightactive : styles.buttonright ?? ""}`} size="sm" value={3072} bsPrefix='ia'>{"Thorough"}</Button>
            </ButtonGroup>
        </div>
    );
};

我的package.json内容如下：

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "watch": "tsc && vite build --watch"
  },
  "dependencies": {
    "@fluentui/react": "^8.110.7",
    "@fluentui/react-icons": "^2.0.195",
    "@react-spring/web": "^9.7.1",
    "dompurify": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "@azure/storage-blob": "^12.13.0",
    "classnames": "^2.3.1",
    "nanoid": "3.3.4",
    "prop-types": "15.8.1",
    "react-bootstrap": "^2.7.4"
  },
  "devDependencies": {
    "@types/dompurify": "^2.4.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^4.2.1",
    "prettier": "^2.8.3",
    "typescript": "^4.9.3",
    "vite": "^5.0.10",
    "postcss-nesting": "^11.2.2"
  }
}

解决方案

这个错误是类型不兼容导致的，大概率是依赖版本冲突或类型定义不一致，按以下步骤排查：

重新安装依赖，清除版本冲突
先删除本地依赖和锁文件，重新安装，解决可能存在的间接依赖版本冲突：
```
rm -rf node_modules package-lock.json
npm install
```
检查bsPrefix属性的使用
你给Button组件设置了bsPrefix='ia'，这个属性会修改组件的基础类名，可能干扰react-bootstrap的类型推导。先临时移除该属性，验证报错是否消失：
```
<Button id="Succinct" className={`${defaultValue == 1024? styles.buttonleftactive : styles.buttonleft ?? ""}`} size="sm" value={1024}>{"Succinct"}</Button>
```
如果移除后正常，说明自定义bsPrefix的方式存在问题，改用className覆盖样式更稳妥，或者确保自定义前缀对应的样式类存在且符合组件要求。
升级TypeScript版本
你使用的TypeScript 4.9.3和Vite 5.x存在兼容性隐患，Vite 5推荐使用TypeScript 5.x以上版本。执行命令升级：
```
npm install typescript@latest --save-dev
```
升级后重新运行类型检查：
```
tsc
```
同步@types/react与react版本
你的@types/react版本（18.0.27）和react核心版本（18.2.0）存在差距，可能导致类型定义不匹配。升级类型包：
```
npm install @types/react@latest @types/react-dom@latest --save-dev
```
清除TypeScript缓存
缓存可能导致奇怪的类型错误，删除缓存文件后重启开发服务器：
```
rm -rf .tsbuildinfo
npm run dev
```

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