[解決済み] React propTypes: objectOf vs shape?
2023-01-17 17:55:57
質問
とはどう違うのでしょうか?
PropTypes.objectOf
と
PropTypes.shape
? の中で
PropTypes
:
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)
対
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
どのような場合に
objectOf
を使い、いつ
shape
?
どのように解決するのですか?
PropTypes.objectOf
は、プロパティがすべて同じ型のオブジェクトを記述するときに使用します。
const objectOfProp = {
latitude: 37.331706,
longitude: -122.030783
}
// PropTypes.objectOf(PropTypes.number)
PropTypes.shape
は、キーが事前に分かっていて、異なる型を表す可能性のあるオブジェクトを記述するときに使用されます。
const shapeProp = {
name: 'Jane',
age: 25
}
// PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React - 制御不能な入力を変更する
-
[解決済み] ReactJsです。this.props.childrenのPropTypesはどうすればいいのでしょうか?
-
[解決済み】ReactのPropTypes。1つのプロップに対して異なるタイプのPropTypesを許可する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] configuration.module に未知のプロパティ 'loaders' があります。
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] アクシオスは定義されていません
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する