React JS开发Button组件持续报JSX类型无效错误如何解决

核心报错原因 #

这个报错本质是JSX里渲染的标签不是合法的React组件类型：渲染内置标签需要字符串（比如'button'/'div'），渲染自定义组件需要函数/类组件，你现在传入的是普通对象，90%的情况是导入导出写法错误导致的。 #

第一步：先修正导入语句（最高概率触发原因） #

打开报错定位的sign-up-form.component.jsx文件，找到第102行附近的Button导入代码：

• 你的Button组件用的是默认导出（export default Button），导入时不能加花括号用具名导入，否则拿到的是模块对象而非组件本身，直接触发这个报错
  • ❌ 错误写法：import { Button } from './button/button.component'
  • ✅ 正确写法：import Button from './button/button.component'
• 同时确认导入路径完全正确，路径拼写错误时部分构建工具会返回空对象，也会报同样的错。

第二步：修复Button组件本身的隐性bug #

你贴的Button组件代码就算导入改对，也会存在功能、样式失效问题，需要一并修正：

• className拼接缺少空格：当前写法传入buttonType时会生成button-containergoogle-sign-in这类连在一起的非法类名，样式完全不生效
• 漏传剩余属性：你写了...otherProps但没绑定到原生button上，onClick、type、disabled等绑定的属性全部失效
• 漏渲染子节点：传入的按钮文字、图标不会显示
  修正后的完整组件代码：

import './button.styles.scss';

const BUTTON_TYPE_CLASSES = {
  google: 'google-sign-in',
  inverted: 'inverted',
};

const Button = ({ children, buttonType, ...otherProps }) => {
  return (
    <button
      className={`button-container ${BUTTON_TYPE_CLASSES[buttonType] || ''}`}
      {...otherProps}
    >
      {children}
    </button>
  );
};

export default Button;

第三步：剩余场景排查 #

如果以上改完还报错，按顺序检查：

• 检查sign-up-form.component.jsx第102行的JSX，是不是误把Button写成了模块对象，比如错写为import * as Button from 'xxx'，这种写法拿到的是整个模块对象，直接渲染就会报错
• 检查是否存在循环引用：如果Button组件文件和SignUpForm组件文件互相导入，会导致导入时拿到未初始化的对象，触发报错
• 检查保存后构建工具有没有热更新成功，偶尔缓存问题会导致旧代码持续运行，重启开发服务即可

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