ReactJSを使用しています。
以下のコードを実行すると、ブラウザに次のように表示されます。
キャッチされない TypeError: スーパー式は null または関数のいずれかでなければならず、undefined であってはなりません
何が間違っているのかについてのヒントがあれば、ぜひ教えてください。
まず、コードをコンパイルするために使用される行:
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 日間地獄の業火に焼かれた後、私は react の最新バージョンを使用していなかったことに気付きました。
グローバルにインストール:
sudo npm install -g [email protected]
ローカルにインストール:
npm install [email protected]
ブラウザが正しいバージョンを使用していることも確認してください。
<script type="text/javascript" src="react-0.13.2.js"></script>
これで他の誰かの貴重な命が3日間救われることを願います。
ベストアンサー1
クラス名
まず、 React.componentや React.createComponent ではなく、 React.Componentなど、正しい名前のクラスから拡張していることが確実な場合は、React のバージョンをアップグレードする必要がある可能性があります。拡張元のクラスの詳細については、以下の回答を参照してください。
Reactのアップグレード
Reactはバージョン0.13.0以降、ES6スタイルのクラスのみをサポートしています(サポート導入に関する公式ブログ投稿を参照)。ここ。
その前に、使用する場合:
class HelloMessage extends React.Component
extends
ES6 キーワード ( ) を使用して、ES6 を使用して定義されていないクラスからサブクラス化しようとしていました。これが、定義などclass
で奇妙な動作が発生していた原因である可能性があります。super
つまり、TL;DR - React v0.13.x にアップデートします。
循環依存関係
これは、循環インポート構造がある場合にも発生する可能性があります。つまり、1 つのモジュールが別のモジュールをインポートし、その逆も同様です。この場合、これを回避するためにコードをリファクタリングする必要があります。より詳しい情報