React报错疑问：同代码组件实例化为何一个报错一个正常？

DevOps 小满

2026-5-20

这个报错我刚学React的时候也踩过一模一样的坑！核心原因就是你传给React渲染的「组件」其实不是合法的组件类型——React期望的是内置组件的字符串（比如'div'）、自定义类组件或者函数组件，但你实际传了一个普通对象，所以才会抛出这个错误。

结合你说的「两个代码完全一致的组件一个报错一个正常」的情况，大概率是导入导出的匹配出了问题，下面给你拆解最常见的几种原因和排查方法：

默认导出和命名导出搞混了
这是最容易踩的坑！比如你导入的Method组件，如果它的文件里用的是export default Method（默认导出），那你用import Method from "./Method"是完全正确的；但如果Method是用export const Method = ...或者export class Method ...（命名导出）写的，那你必须用import { Method } from "./Method"来导入。
你说两个组件代码一致，可能其中一个组件的导出方式不一样？比如一个是默认导出，另一个是命名导出，而你导入的时候没对应调整，导致其中一个拿到的是整个模块对象（不是组件本身），渲染时就触发报错了。
组件导出的不是合法的React组件
比如你可能在Method.js里不小心写成了这样的错误代码：
```
// 错误写法：导出了一个普通对象，不是组件类/函数
export default {
  render() {
    return <div>...</div>
  }
}
```
这种情况下你导入的就是一个普通对象，React没法把它当成组件渲染，自然报错。而另一个正常的组件应该是正确导出了class extends Component或者函数组件。
循环导入的隐藏坑
如果你的InterfaceCo组件和Method组件互相导入了对方（比如A导入B，B又导入A），可能会导致模块加载时拿到未初始化的对象，这种情况也会触发这个报错。如果两个组件里一个存在循环导入，一个没有，就会出现你说的差异。

给你几个快速排查的步骤：

打开Method.js文件，仔细看它的导出语句，确认是默认导出还是命名导出，然后对应调整InterfaceCo里的导入语句；
检查Method组件是不是真的定义成了class extends Component或者函数组件，导出的不是普通对象；
看看两个组件的导入路径、文件名有没有细微差别（比如大小写，虽然本地开发可能忽略，但也可能导致意外问题）。

举个正确的例子对比：

// Method.js 正确的默认导出
import React, { Component } from 'react';
class Method extends Component {
  render() {
    return <div>Method Component</div>;
  }
}
export default Method;

// 对应的正确导入
import Method from "./Method";

// Method.js 正确的命名导出
import React, { Component } from 'react';
export class Method extends Component {
  render() {
    return <div>Method Component</div>;
  }
}

// 对应的正确导入
import { Method } from "./Method";

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