[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?
2022-03-15 12:11:34
質問
どのような場合にパスすることが重要ですか?
props
から
super()
その理由は?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
解決方法は?
を渡す必要がある場合、たった一つの理由があります。
props
から
super()
:
にアクセスしたいとき。
this.props
をコンストラクタで実行します。
渡すこと。
class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home', … }
}
}
パスしない
class MyComponent extends React.Component {
constructor(props) {
super()
console.log(this.props)
// -> undefined
// Props parameter is still available
console.log(props)
// -> { icon: 'home', … }
}
render() {
// No difference outside constructor
console.log(this.props)
// -> { icon: 'home', … }
}
}
を渡すか渡さないかに注意してください。
props
から
super
がある
効果なし
を使用すると、後で
this.props
外
constructor
. それは
render
,
shouldComponentUpdate
またはイベントハンドラ
常に
にアクセスすることができます。
このことは、ソフィー・アルパートの1冊の本に明示されています。 答え という質問に対して、同じような質問をしました。
ドキュメント- ステートとライフサイクル、クラスへのローカルステートの追加、ポイント2 -を推奨しています。
クラスコンポーネントは、常にベースコンストラクタを呼び出す際に
props
.
しかし、その理由は示されていない。サブクラス化のためか、将来の互換性のためか、どちらかだと推測されます。
(リンクを貼ってくれた@MattBrowneに感謝)
関連
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] npxとnpmの違い?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み】ES6クラス変数の代替品
-
[解決済み】Reactの機能的なステートレスコンポーネント、PureComponent、Component、どのような違いがあり、いつ何を使うべきですか?
-
[解決済み】ES6クラスベースのReactコンポーネントと機能的なES6 Reactコンポーネントの使い分けはいつ?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] アクシオスは定義されていません
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み】Reactコンポーネントはpropsから状態を初期化する