[解決済み] Reactのコンストラクタでsuper()を呼び出すとどうなるのか?
2023-03-28 16:16:02
質問
Reactの学習について ドキュメント を読んでいて、この例に出会いました。
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
...
}
によると
モジラ
によると、super では
this
をコンストラクタで使用することができます。他に何かスタンドアローンの
super
(私が知っているのは
super
で親クラスのメソッドにアクセスできることは知っていますが、React では、単に
super()
を単体で呼び出す以外に使い道はあるのでしょうか?
どのように解決するのですか?
super()
は、リアクトコンポーネントの内部で、コンストラクタを持つ場合にのみ呼び出されます。例えば、以下のコードではsuperは必要ありません。
class App extends React.component {
render(){
return <div>Hello { this.props.world }</div>;
}
}
しかし、もしコンストラクタがあるのなら
super()
は必須です。
class App extends React.component {
constructor(){
console.log(this) //Error: 'this' is not allowed before super()
}
}
その理由は
this
の前に許可されないのは
super()
は
this
が初期化されていないためです。
super()
が呼び出されないと初期化されません。しかし、たとえ
this
を使っていなくても
super()
はコンストラクタの内部で
ES6 class constructors MUST call super if they are subclasses
. したがって
super()
を呼び出す必要があります。(ただし、サブクラスはコンストラクタを持つ必要はない)。
私たちは
super(props)
を使用する必要がある場合は、コンストラクタの内部で
this.props
などとする。
class App extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
わかりやすくできたかな。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] explicit キーワードの意味は?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] Java で、あるコンストラクタを別のコンストラクタから呼び出すにはどうすればよいですか?
-
[解決済み] C#でベースコンストラクタを呼び出す
-
[解決済み] React JSX内のループ
-
[解決済み】JavaScript版sleep()とは?)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] ES6でsuperを使用せずにクラスを拡張するには?