[解決済み】ReactJSでネストされたオブジェクトのPropTypesを検証する方法は?
2022-04-12 03:31:45
質問
ReactJSのコンポーネントのpropsとしてデータオブジェクトを使用しています。
<Field data={data} />
PropTypesオブジェクト自体を検証するのは簡単だと思いますが。
propTypes: {
data: React.PropTypes.object
}
しかし、内部の値を検証したい場合はどうすればよいのでしょうか? 例えば、data.id や data.title など?
props[propName]: React.PropTypes.number.required // etc...
解決方法は?
を使用することができます。
React.PropTypes.shape
を使用してプロパティを検証します。
propTypes: {
data: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
title: React.PropTypes.string
})
}
更新情報
コメントで @Chris さんが指摘されているように、React バージョン 15.5.0 の時点では
React.PropTypes
はパッケージに移動しました。
prop-types
.
import PropTypes from 'prop-types';
propTypes: {
data: PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string
})
}
関連
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] ReactJsです。this.props.childrenのPropTypesはどうすればいいのでしょうか?
-
[解決済み】React:setStateを使用してstateのstate.item[1]を更新するには?
-
[解決済み】ReactJSでHTMLの文字列をJSXに変換する。
-
[解決済み] React-routerです。手動でLinkを呼び出すには?
最新
-
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コンポーネント内でswitchステートメントを使用するには?
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] React」は定義される前に使用されていた