responsejs, выдавая ошибку Uncaught TypeError: Супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным

Это означает, что вы хотите, чтобы подкласс чего-то, что должно быть Class, но есть undefined. Причины могут быть следующими:

• typo in Class extends ..., поэтому вы расширяете переменную undefined
• typo in import ... from, поэтому вы импортируете undefined из модуля
• ссылочный модуль не содержит значения, вы хотите импортировать (например, устаревший модуль - case with React), поэтому вы импортируете не существующее значение (undefined)
• typo в ссылочном модуле export ..., поэтому он экспортирует переменную undefined
• отсутствует модуль export отсутствует, поэтому он экспортирует только undefined

Он также может быть вызван ошибкой typo, поэтому вместо Component с капиталом C у вас есть Component с более низким c, например:

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

Примечание: Источником этой ошибки может быть, потому что существует React, и мы думаем автоматически, что будет дальше, должен быть метод реагирования или свойство, начинающееся с строчной буквы, но на самом деле это еще один класс (Component), который должен начинаться с буквы основного письма.

В моем случае, с реакцией-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';

Я испытал это при отсутствии инструкции экспорта для класса JSX.

Например:

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

Я видел эту ошибку, когда у вас есть круговая зависимость.

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

Для любых других лиц, которые могут разработать эту проблему. Вы также можете проверить, что метод component в React.Component является заглавным. У меня была та же проблема, и что вызвало это, я написал:

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

Я изменил его на

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

и все сработало хорошо

Вы также можете получить это, если вы пытаетесь выполнить React.Component с ошибочным () в определении вашего класса.

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

Что мне иногда удается сделать, когда я перехожу из функционального компонента без состояния в класс.

Я получил это, когда у меня была опечатка на моем импортировании:

import {Comonent} from 'react';

Проверить, что классы, которые вы расширяете, фактически существуют, несколько методов React амортизируются, также может быть ошибка Typo 'React.Components' вместо 'React.Component'

Удачи!!

Я собираюсь внести еще одно возможное решение, которое сработало для меня. Я использовал индекс удобства для сбора всех компонентов в один файл.

Я не верю, что на момент написания это официально поддерживается babel и бросает typescript в спину - однако я видел, что он используется во многих проектах и ​​определенно удобен.

Однако при использовании в сочетании с наследованием, похоже, возникает ошибка, представленная в вопросе выше.

Простым решением является то, что для модулей, которые действуют как родители, необходимо импортировать напрямую, а не через индексный индекс удобства.

./SRC/компоненты/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';

./SRC/компоненты/ком-1/Com1.js

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

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

./SRC/компоненты/ком-3/Com3.js

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

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

./SRC/компоненты/ком-3/Com3.js

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

// This does work
class Com3 extends Parent {        
}

Это сработало для меня:

import React, {Component} from 'react';

У меня такая же проблема, просто измените с Navigator на {Navigator}

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

Я написал

React.component

вместо React.Component Это была моя проблема)) и искал это более получаса.

Моя проблема заключалась в том, что я не экспортировал класс в конец файла...

Посмотрите, если у вас есть ошибка опечатки в вашем импорте или поколении, это может быть просто так.

Я столкнулся с этой ошибкой при импорте компонента, например:

import React, { Components } from 'react';

вместо

import React, { Component } from 'react';

В моем случае я использовал:

class Root extends React.Component() {
// THIS IS WORNG
// After React.Component () <- WRONG!!
}

который был неправильным, но правильным является:

class Root extends React.Component {
// THIS IS CORRECT
// That -> '()' after React.Component was typo
}

также убедитесь, что есть √ React.Component
НЕ
ˣ React.Component или React.Components

Неправильно для этого ответа, но для других с той же ошибкой моя смехотворная глупая ошибка может потенциально помочь.

Глупо, моя проблема была с использованием нотации функций, включая() после имени класса.

Убедитесь, что ваш синтаксис верен. И вы импортировали и экспортировали любые внешние компоненты/модули с правильными именами и путями.

Этот шаблон должен работать нормально, если у вас установлена ​​новая версия реакции:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Использование Babel (5.8) Я получаю ту же ошибку, если попытаюсь использовать выражение export default в сочетании с некоторым другим export:

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

Если вы работаете в режиме dev dev, остановитесь и перестройте его. Я преобразовал модуль ES6 в React Component, и он работал только после перестройки (против сборки часов).

Для меня я забыл default. Поэтому я написал export class MyComponent вместо класса export default class MyComponent

В моем случае оказалось, что React <15.3.0 не включает React.PureComponent. Так что код вроде:

class MyClass extends React.PureComponent {
    //...
}

не сработает.

У меня была эта проблема, потому что мои версии react и react-dom после слияния не совпадали.

Я исправил это, вручную введя номер npm install версии и снова запустив npm install.

В моем случае я использовал модуль npm с одноранговыми зависимостями. Ошибка была вызвана неправильной "внешней" конфигурацией в конфигурации модуля webpack:

  externals: {
    react: 'react',
    react: 'prop-types',
  },

Так должно быть:

externals: {
    react: 'react',
    ['prop-types']: 'prop-types',
  },

Другой случай, связанный с Expo/реакции-native с машинописным шрифтом: иногда, когда вы перекомпилируете файлы машинописного текста в середине упаковки, упаковщик реагирует на потерю.

Единственный способ снова запустить мое приложение - очистить кеш; если вы используете экспо-клик, вы можете нажать клавишу R (это верхний регистр 'R'); это восстановит весь пакет. Иногда переключение в режим разработки также помогает....

В моем случае я исправил эту ошибку, изменив export default class yourComponent extends React.Component() {} чтобы export default class yourComponent extends React.Component {}. Да, удалите скобки () исправили ошибку.

Вот один ответ:

import React, { Component } from 'react'; // NOT 'react-dom'

В моем случае это было изменение React.Element на React.Component, которое исправило эту ошибку.

Для тех, кто использует react-native:

import React, {
  Component,
  StyleSheet,
} from 'react-native';

может выдать эту ошибку.

Принимая во внимание, что ссылки react напрямую, это более стабильный путь:

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';

Это также может произойти, если у вас есть рекурсивный импорт.

i.e Для компонента ComponentA для компонентов ComponentB и ComponentB требуется ComponentA.

Случилось также, когда я использовал это:

class App extends React.Component(){

}

Вместо правильного:

class App extends React.Component{

}

Обратите внимание: -() в первом, что является основной причиной этой проблемы

Это также может произойти, если вы использовали require вместо import в своем коде.

Если вы получаете эту ошибку и используете Browserify и browserify-shim (например, в задаче Grunt), возможно, вы столкнулись с тупым моментом, как я сделал, где вы непреднамеренно сказали browserify-shim рассматривать React как уже часть глобального пространства имен (например, загружаемого из CDN).

Если вы хотите, чтобы Browserify включал React как часть преобразования, а не отдельный файл, убедитесь, что строка "react": "global:React" не отображается в разделе "browserify-shim" в вашем файле packages.json.

в моем случае пишу

class Name extends React.Compoment//вместо класса Name extends React.Component