[reactjs] catchjs 오류 발생 Uncaught TypeError : 수퍼 표현식은 정의되지 않은 null 또는 함수 여야합니다.

Program / 글쓴이

reactjs를 사용하고 있습니다.

아래 코드를 실행하면 브라우저에 다음과 같이 말합니다.

잡히지 않은 TypeError : 슈퍼 표현식은 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>;
  }
}

업데이트 :이 문제에 대해 3 일 동안 지옥 불에 구우면 최신 버전의 반응을 사용하지 않는 것으로 나타났습니다.

글로벌 설치 :

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>

이것이 3 일의 소중한 생명을 구할 수 있기를 바랍니다.

답변

수업 명

당신은 당신이 올바르게라는 이름의 클래스에서 예를 들어 확장하고 확신이 있다면 첫째, React.Component 하지 React.component 또는 React.createComponent을, 당신은 당신의 반작용 버전을 업그레이드해야합니다. 확장 할 클래스에 대한 자세한 내용은 아래 답변을 참조하십시오.

업그레이드 반응

반응은 전용 버전 0.13.0 이후 (지원 소개에 자신의 공식 블로그 게시물을 참조 ES6 스타일 클래스를 지원하고 여기를 .

그 전에는 다음을 사용하십시오.

class HelloMessage extends React.Component

ES6 키워드 ( extends)를 사용하여 ES6으로 정의되지 않은 클래스에서 서브 클래스 를 사용하려고했습니다 class. 이것은 당신이 super정의 등 으로 이상한 행동을했던 이유 일 것입니다 .

예, TL; DR -React v0.13.x로 업데이트하십시오.

순환 종속성

순환 가져 오기 구조가있는 경우에도 발생할 수 있습니다. 한 모듈이 다른 모듈을 가져오고 다른 모듈을 가져옵니다. 이 경우 코드를 피하기 위해 코드를 리팩터링하면됩니다. 더 많은 정보

답변

당신이해야 서브 클래스 뭔가 원하는이 의미 Class하지만입니다 undefined. 그 이유는 다음과 같습니다.

  • 오타 Class extends ...이므로 정의되지 않은 변수를 확장하십시오.
  • 오타가 import ... from있으므로 undefined모듈에서 가져옵니다.
  • 참조 된 모듈에 값이 포함되어 있지 않으므로 가져 오기 (예 : 더 이상 사용되지 않는 모듈-React의 경우)를 원하므로 기존 값이 아닌 값을 가져옵니다 ( undefined)
  • 참조 된 모듈 export ...명령문의 오타 이므로 정의되지 않은 변수를 내 보냅니다.
  • 참조 모듈 누락 export문이 있으므로 내보내기 만합니다.undefined

답변

또한 오타 오류로 인해 발생할 수 있으므로 Component대문자 C 대신 componentc가 낮습니다. 예를 들면 다음과 같습니다.

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

참고 :
이 오류의 원인은 React소문자로 시작하는 반응 방법 또는 속성이어야하지만 다음에 오는 것은 자동으로 생각되지만 대문자로 시작 해야하는 또 다른 클래스 ( Component)입니다. .

답변

제 경우에는 반응 네이티브로 오류가 발생했습니다.

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

답변

클래스 정의에서 React.Component잘못된 것으로 실행하려는 경우에도이를 수신 할 수 있습니다 (). 

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

상태 비 저장 기능 구성 요소에서 클래스로 변환 할 때 가끔 수행하는 작업입니다.

답변

순환 종속성이있을 때이 오류를 보았습니다.

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