reactjs给出错误Uncaught TypeError:超级表达式必须为null或函数，而不是未定义的

我正在使用reactjs

当我运行下面的代码时，浏览器会显示：

未捕获类型错误：超级表达式必须为null或函数，而不是未定义的

任何关于错误的提示都将不胜感激

首先是用于编译代码的行：

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

以及守则：

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

本地安装：

sudo npm install -g react@0.13.2

npm install react@0.13.2

<script type="text/javascript" src="react-0.13.2.js"></script>

确保浏览器也使用了正确的版本：

sudo npm install -g react@0.13.2

npm install react@0.13.2

<script type="text/javascript" src="react-0.13.2.js"></script>

---

希望这能为其他人节省三天宝贵的生命。

课程名称

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

首先，如果您确定是从正确命名的类（例如React.Component）扩展，而不是从React.Component或React.createComponent扩展，则可能需要升级React版本。有关要扩展的类的更多信息，请参见下面的答案

升级反应

React自版本0.13.0以来仅支持ES6样式的类（请参阅他们在支持简介上的官方博客文章）

在此之前，使用时：

class HelloMessage extends React.Component

您试图使用ES6关键字（

extends

）从未使用ES6

class

定义的类中创建子类。这可能是您在使用

super

定义时遇到奇怪行为的原因

因此，是的，TL；DR-更新为React v0.13.x

循环依赖关系

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

---

如果您有循环导入结构，也可能发生这种情况。一个模块导入另一个模块，另一个模块导入。在这种情况下，您只需要重构代码以避免它。

如果您收到此错误并且正在使用and（如在Grunt任务中），您可能会经历一个像我一样的愚蠢时刻，您无意中告诉

browserify shim

将React视为全局命名空间的一部分（例如，从CDN加载）

---

如果您希望Browserify将React作为转换的一部分而不是一个单独的文件，请确保在

packages.json

文件的

“Browserify shim”

部分中没有出现行

“React”：“global:React”

。

我在缺少JSX类的导出语句时遇到了这种情况

例如：

class MyComponent extends React.Component {
}
export default MyComponent // <- add me

类MyComponent扩展了React.Component{ }

---

导出默认MyComponent/当您具有循环依赖项时，我看到了这个错误

class A extends B {}
class B extends C {}
class C extends A {}

---

这意味着您希望对某些内容进行子类化，该类应为

Class

，但

未定义


类中的输入错误扩展了…

，因此您扩展了未定义的变量

import…from

中输入错误，因此您可以从模块中导入

未定义的

引用的模块不包含该值，您需要导入（例如，过时的模块-以React开头），因此您导入不存在的值（

未定义

）

引用模块

export…

语句中的输入错误，因此它导出未定义的变量

引用的模块完全缺少

export

语句，因此它只导出

undefined

使用Babel（5.8）如果我尝试将表达式

导出默认值

与其他一些

导出

结合使用，我会得到相同的错误：

export const foo = "foo"
export const bar = "bar"
export default function baz() {}

---

检查您扩展的类是否实际存在，很少有React方法被降级，这也可能是打字错误

'React.Components'

，而不是

'React.Component'

---

祝你好运！！

如果你试图用类定义中错误的

（）

执行

React.Component

，你也可以收到这个消息

export default class MyComponent extends React.Component() {}
                                                        ^^ REMOVE

---

当我从一个无状态的功能组件转换为一个类时，我有时会设法做到这一点。

我将提供另一个可能的解决方案，一个对我有效的解决方案。我使用便利索引将所有组件收集到一个文件中

我不相信在写这篇文章的时候，它得到了巴贝尔的官方支持，并使typescript陷入了混乱——然而，我已经看到它在许多项目中得到了使用，而且绝对是方便的

然而，当与继承结合使用时，它似乎抛出了上述问题中出现的错误

一个简单的解决方案是，作为父模块的模块需要直接导入，而不是通过方便的索引文件导入

/src/components/index.js

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

/src/components/com-1/Com1.js

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

/src/components/com-3/Com3.js

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

---

在我的例子中，对于react native，错误在于

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

而不是

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';

import React, { Component } from 'react';

---

当我的输入有一个输入错误时，我得到了这个：

import {Comonent} from 'react';

---

它也可能是由打字错误引起的，因此，您使用的不是大写C的

Component

，而是小写C的

Component

，例如：

React.component //wrong.
React.Component //correct.

注意：

---

此错误的来源可能是因为存在

React

，我们自动认为接下来应该是一个以小写字母开头的React方法或属性，但实际上它是另一个类（

组件

）它应该以大写字母开头。

对于可能出现此问题的任何其他人。您还可以检查

React.component

中的

组件
方法是否大写。我也有同样的问题，原因是我写了：

class Main extends React.component {
  //class definition
}

我把它改成了

class Main extends React.Component {
  //class definition
}

而且一切都很顺利
我也有同样的问题，只是从
Navigator
改为
{Navigator}

import Navigator from 'react-native-deprecated-custom-components'
// to
import {Navigator} from 'react-native-deprecated-custom-components'

如果在代码中使用了
require
而不是
import
，也会发生这种情况。
我已经写过

React.component

而不是
React.Component
那是我的问题
我花了半个多小时才找到它。
当我使用它时，我也遇到了这种情况：

class App extends React.Component(){

}

而不是正确的一个：

class App extends React.Component{

}

注意：第一条中的-（）是造成这种情况的主要原因